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:

图8

                        实现的效果如图9:

图9

     与绘制圆不同的是,绘制圆的时候,定义圆心,绘制的起点在圆上,而扇形不同,归纳来说,绘制扇形是需要三条边参与,而绘制圆只需要一条线即可.所以在绘制扇形的时候需要定义起始位置.

同理,如果想要绘制优弧和劣弧,只需要在圆的基础上改变始末角度即可.(注意方向)

 

2.3 canvas之矩形绘制

     其实,矩形绘制和圆形绘制几乎一样,只是调用函数不一样.绘制矩形用到的函数是.strokeRect();在括号里需要填写四个参数,即起始位置(矩形左上角),矩形宽,矩形高;

2.4canvas之文字

  canvas对于文字的绘制与直线和圆形的还不一样,可以简单地理解为对文字的描边,或者填充.通常情况下,绘制文字和渐变搭配,效果更好.代码如图10:

 

图10

效果如图11:

图11

在这里提两点:

1.文字描边与文字填充:

   文字描边简单地说就会说空心填充,这里用到一个属性.strokeStyle和一个方法.strokeText(text,x,y,w);其中在方法里需要传入四个参数,即文本,文本起始位置,文本的宽度.

   同理,文字填充也用到一个属性和方法,即.fillStyle; .fillText() ; 传入的参数和文字描边一样.

2.文字渐变

  这里重要的就是文字渐变,首要的问题就是文字渐变是怎么实现的?

 其实,这个和Photoshop中的图层叠加的效果相似,只有在文字边的周围才有颜色,可以简单的理解为在文本的下方绘有一个渐变色的图层,而把文本的边缘掏空,两张图片进行叠加形成的渐变效果.

如果要理解详细的理论,其实是在对应文本边缘的对应位置上填充对应渐变色在这个对应位置上的对应颜色.

其中,渐变的颜色和渐变位置可以用.addColorStop();函数解决,里面需要传入两个参数,一个是位置0-1之间的数字,是相对于宽度的百分比计算的.第二个参数就是渐变的颜色.

2.5canvas之阴影效果

   先看代码,如图12:

 

图12

效果如图13:

图13

     在这里需要我哥属性介入,即阴影的颜色,阴影的偏移量,还有模糊度,这个与css中的box-shadow,text-shadow,这两个属性类似.

注意其实做到这里可以实现一个圆月的效果,即把矩形换成圆形,代码如图14:

 

 图14

效果如图15:

图15

 

3.canvas之canvas变化

  canvas变化需要提及到平移,旋转,缩放,还有扭曲,为了更好的区分开来,这里只说前三个,最后一个扭曲需要借助于贝瑟尔曲线.

对于canvas的变化本质上不是团在变化,而是canvas在改变,在这里直接三者一起总结,代码如图16:

效果如图17:

图17

对于红色矩形来说,如果定义起始坐标为(0,0),那么出现的位置是在canvas的左上角.这一点毫无疑问.

对于蓝色矩形来说,坐标位置发生了改变,但是蓝色的坐标还是(0,0);只是坐标向右下角平移了.然后蓝色矩形发生了旋转,同理,旋转也是相对与坐标原点,这一点也证明了蓝色的坐标原点发生了改变.