css3-canvas

1.canvas画布，是一个标签。

2.画矩形：1> 空心 stroke

                   2>实心 fill

 strokeRect()  绘制空心矩形 默认为黑色 

语法 context.strokeRect(x,y,width,height)

3.画线：

context.moveTo(x,y) 线条开始坐标

context.lineTo(x,y) 线条结束坐标

beginPath():开始一条路径

colsePath():关闭一条路径

4.画圆：

context.arc()

语法：context.arc(x，y，r，起始角，结束角，顺逆时针)

counterclockwise="true"

false—顺时针

true—逆时针

默认为顺时针

5.渐变：

线性渐变：createLinearGradient(x1,y1,x2,y2) 第一组参数是起始坐标；

                                                                          第二组参数是结束坐标。

放射性渐变：createRadialGradient(x1,y1,r1,x2,y2,r2)

添加渐变点：addcolorStop(位置，颜色)

例：addcolorStop(0,"pink") 0是开始，1是结束。

6.canvas文本：

1.strokeText（文字，x,y）文字边框

2.fillText(文字，x，y) 文字填充

3.左右对齐方式：textAlign="left,center,right"

4.上下对齐方式：textBaseLine="top,middle,bottom"

7.canvas插入图片：

等图片加载完在执行canvas操作，所以在onlcoad中调用方法

先创建image（）图像

语法1：huabi.drawImage(img,x,y)

语法2：huabi.drawImage(img,x,y,width,height)规定图像的宽度和高度

语法3：huabi.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)剪切图像，并定位被剪切的部分