在没学canvas的时候,觉得canvas是这么的神秘,这么的绚丽,这么的高深,用canvas做出来的效果是如此的炫酷,能做的事情如此的宽广,简直让我心生敬畏之心,时常感叹:我要是得此技能,必定要上天了(注意,这里不是要升天啊),那时候一直不敢涉猎的原因主要是,第一,在还需要兼容IE的时代,兼容性是硬伤;第二,参考资料的如此的少,又或是参考资料五花八门,没有适合入门的比较好的参考文章,第三,canvas之所以能无所不能,其最大的原因是有一个好伙伴JavaScript,那是的JavaScript还是不甚了解。(借口真多)

想法都一样.O(∩_∩)O


详解链接(超详细):https://www.cnblogs.com/liugang-vip/p/5360283.html

黑白双煞:

fill()  填充,此为实心的

stroke()  绘制,此为空心的

此黑白双煞在以后的绘图中起到核心作用,切记这2个方法(为什么我叫它们黑白双煞呢,因为canvas默认颜色为黑色,fill()填充颜色为一坨黑,stroke()绘制就像描边一样,一个框,里面是透明的,由此得名,哈哈,方便记忆)。

 

 

点,线之后便是面了,我们来绘制矩形吧,矩形也有三兄弟,暂且命名为阮氏三兄弟:

rect(x,y,w,h)   在x,y坐标点绘制一个矩形,宽高为w,h,此方法只是绘制路径,必须用黑白双煞才能显示

fillRect(x,y,w,h)  在x,y坐标点绘制一个填充矩形,宽高为w,h

strokeRect(x,y,w,h)  在x,y坐标点绘制一个描边矩形,宽高为w,h

总结一下:

1、rect()不能单独使用,必须借助fill(),stroke()方法;

2、rect()+stroke() 组合的效果和strokeRect()一致,可等价

3、rect()+fill() 组合的效果和fillRect()一致,可等价

 

 

 

我们说画布上的图形皆为路径,所以,文字作为另一种图形,也存在黑白双煞:

fillText(text,x,y,[maxWidth]);  顾名思义,这是填充文字

strokeText(text,x,y,[maxWidth]); 顾名思义,这是描边文字

参数:

text :需要绘制的文字

x,y: 文字绘制的起始坐标

[maxWidth] : 文字的最大宽度,选填


textBaseline

ctx.textBaseline = “bottom”;

参数:

alphabetic : 默认。文本基线是普通的字母基线。

top : 文本基线是 em 方框的顶端。

hanging : 文本基线是悬挂基线。

middle :文本基线是 em 方框的正中。

ideographic : 文本基线是表意基线。

bottom :文本基线是 em 方框的底端。

 

 

强大的canvas自带样式设置技能,走哪里都不怕,我们看看有哪些:

font  参数:font-style font-variant font-weight font-size font-family,分别表示的意思是字体样式(如倾斜),是否大小写,字体粗细,字体大小,字体

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font="italic bold 40px 微软雅黑 ";
ctx.textBaseline = "top"; ctx.fillStyle = 'red'; ctx.fillText('a你想对我说什么',0,20); textAlign 参数:left(默认,文本左对齐),right(文本右对齐),center(文本在指定位置居中),start(文本开始位置),end(文本结束位置)