其他相关canvas绘制属性

绘制文字

fillText(text,x,y,[maxWidth]);

strokeText(text,x,y,[maxWidth]);

其中，text参数表示是要绘制的文字，x，y是绘制文字的起始横纵坐标。maxWidth是可选参数，表示显示文字时的最大宽度。

区别：fillText是填充方式绘图，strokeText是轮廓方式绘图。

在绘图之前可以设置样式,比如设置字体颜色，字体格式，以及水平垂直对齐方式。

ctx.fillStyle = “bule”;

ctx.font = “italic 30px sans-serif”;

ctx.textAlign= ‘center’;

ctx.textBaseline = ‘top’;

简单动画的制作

Canvas画布中制作的动画，实际上是一个不断擦除，重绘，擦除，重绘的过程。

第一：预先编写好用来绘制的函数，并在函数中用clearRect()方法将画布整体或者局部擦除。

第二：使用setInterval(drawFuntion(),time)方法设置动画间隔时间,其中drawFuntion()方法是绘图函数，time是动画间隔时间。

 

绘制矩形

clearRect(x,y,width,height);//将指定矩形区域中的图形进行擦除

fillRect(x,y,width,height);//填充指定矩形区域中的图形

strokeRect(x,y,width,height);//绘制带边框的指定区域中的图形

绘制圆形

步骤：

1)  开始创建路径

2)  创建图形的路径

3)  路径创建完成后关闭路径

4)  设置绘图样式，调用绘制方法绘制路径

ctx.beginPath();

ctx.arc(startX,startY,radius,startAngle,endAngle,false);//最后一个参数如果为true，按逆时针方向绘制，如果为false按顺时针方向绘制

ctx.closePath();

ctx.fillStyle=’rgba(255,0,0,0.25)’;

ctx.fill();

绘制直线

方法：

moveTo(x1,y1),起始位置横纵坐标。

lineTo(x2,y2),终点位置横纵坐标。

属性：

lineCap:

1)       butt 不为直线添加线帽

2)       round 为直线添加圆形线帽

3)       square 为直线添加方形线帽

lineJoin:两条直线交汇时的拐角形状

1)       miter 尖角拐角

2)       round 圆角拐角

3)       bevel 斜角拐角

setLineDash:设置虚线形状，奇数表线段长度，偶数表示线段与线段之间的距离

setLineDash([5]);线段长度为5，线段与线段之间的距离为5

setLineDash([5,10]);线段长度为5，线段与线段之间的距离为10

setLineDash([5,10,15]);//浏览器自动复制数组数量为偶数倍，[5,10,15，5,10,15]。setLineDash([5,10,15,20]);