HTML5之canvas细节详谈

一、canvas基础

1.canvas是HTML5 的新标签,其默认宽高为300*150.

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成.

2.canvas图形绘制

在canvas绘制中首先应该提到的是直线绘制,对于一个直线来说,两点确定一条直线,首先必须有一个起点.那么,
问题来了,起点在哪?怎么定义起点?在canvas中有一个虚拟坐标系.如图一:

canvas中定义左上角为(0,0)点,横向为x轴,向左为正,纵向为y轴,向下为负,当然这是相对于没有旋转的情况来说的.

图一

2.1 canvas之直线绘制

在绘制之前必须先从js中获取canvas节点,然后获取canvas内置画笔,画笔分为2d和3d,即平面与立体,对于直线的绘制先从二维入手.如图二:

2.1.1 开始绘制需要调用开始路径函数->设置起点->下一个点->终点

最后需要闭合路径.当然这样还是不够的,因为没有给闭合后的图形填充颜色.这时候就需要2.1.2的填充函数.

注:在每次启用画笔的时候,即调用.beginPath();函数,当绘制的图形完毕的时候记得关闭画笔,即调用.closePath();函数.

图二

2.1.2 在填充这个问题上首先应该区分的是 fill() 和
stroke(),简而言之,fill()用于实心填充,stroke()用于空心填充(描边,为了具有对比性,之后形象说为空心填充).

先说fill():

在刚才的代码中如果添加

txt.fillStyle = ‘yellow‘;

txt.fill()
;

这两行代码,其效果是这样的,如图三:

图三

如果加上

txt.strokeStyle = ‘green‘;

txt.stroke();

这两行代码,效果是这样的,如图四:

图四

那么,在这里就有一个问题,既然stroke()是用于空心填充,那么填充的默认值是多少?怎么修改填充的值?

如果在函数txt.stroke();的上部加上 txt.lineWidth = 5 ;效果如图五:

图五

则明显宽度改变,所以可以使用txt.lineWidth = number
;这个属性来调节宽度.那么同理可以找到其默认宽度为1像素.

注:该属性只能填写数字类型,数字代表多少像素.

注:部分博友在运行程序的时候发现并不没有出现想要的效果,这就是在js中执行顺序的问题了.注意每次开启画笔函数的时候相当于Photoshop中的图层概念,为了使代码更具有条理性,小编建议一个画笔路径在一次画笔中执行(调用画笔函数和关闭画笔函数成对出现一次为一次画笔,即一个图层);

ps:简述图层概念,可以简单理解为一张透明的纸,当多个绘有图案的图层叠在一起就有图案拼凑的效果,所以在执行的时候一定注意顺序问题,有肯能一些本来处于上面的图案被遮盖在图案下方,这时候就需要检查执行顺序了.

2.2canvas之圆形绘制

在2.1中已经讲过直线的绘制,直线闭合后,使用填充fill();函数可以实现二维的效果,其实点动成线,线动成面,在canvas画布中实现二维的效果也就是线在变化的效果,同理,线动是因为点在动.

2.2.1 绘圆,代码如图6,效果如图7:

图6

图7

画圆有专门画圆的函数.arc();也就是说用直线绘制的二维图案是直线闭合填充的效果;而画圆和画矩形是定义起始位置所扫过的面积.在绘制圆的函数中,里面一共需要填写五个参数,即,圆心坐标,x,y值,半径,起始角度,终点角度(注:
在这里角度不能写成字符串的形式,与css里设置角度不同,这里的角度需要用Math.PI函数进行转换,Math.PI
相当于180°),最后一个布尔值就是绘制方向.

2.2.2 绘制扇形:代码如图8: