HTML5-canvas元素

变换：

context.save();//保存样式

context.restore();//恢复样式

context.translate(x,y);

浏览器变换：平移缩放、旋转

路径：

context.beginPath();//开始

context.moveTo(x,y);//不绘制，只是将当前位置移动到新的目标坐标(x,y)

context.lineTo(x,y);//不仅将当前位置移动到新的目标坐标(x,y)，而且在两个坐标之间画一条直线

context.closePath();//将路径的起始坐标自动作为目标坐标。

描边样式：

context.lineWidth = 4;//线宽

context.lineJoin = 'round | bevel | miter';//接合点,拐角样式

context.strokeStyle = "#000";//颜色

context.lineCap = 'butt | square | round';//指定线条末端的样式

填充样式：

context.fillStyle = ‘#0000’;//填充颜色

context.fill();//填充

填充矩形区域：

context.fillRect( x, y, w, h);//填充的矩形区域

strokeRect//基于给出的位置和坐标画出矩形的轮廓

clearRect//清除矩形区域内的所有尼尔并将它恢复到初始状态，即透明色

绘制曲线：

context.quadraticCurveTo(x1,y1,x2,y2);

//(x2,y2)指曲线的终点，(x1,y1)指曲线的控制点（control point）

还有bezierCurveTo、arcTo和arc

在canvas中插入图片：

可以通过修正层为图片添加印章、拉伸图片或者修改图片等，并且图片通常会成为canvas上的焦点。

在呈现之前，应确保图片已经加载完毕。

context.drawImage(?,x,y,w,h);//?为图片var,其他依次为坐标和宽度与高度

渐变：

渐变是指在颜色集上使用逐步抽样算法，并将结果应用于描边样式和填充样式中。

三个步骤

1.创建渐变对象；

2.为渐变对象设置颜色，指明过度方式；

3.在context上为填充样式或者描边暗示设置渐变。

可以将渐变看做是颜色沿着一条线进行缓慢地变化。

要设置显示哪种颜色，在渐变对象上使用addColorStop函数即可。这个函数允许指定两个参数：颜色和偏移量。

颜色参数是指开发人员希望在偏移位置描边或填充时所使用的颜色。偏移量是一个0.0到1.0之间的数值，代表沿着渐变线渐变的距离有多远。

除了可以变换成其他颜色外，还可以为颜色设置alpha值（例如透明），并且alpha值也是可以变化的。为了达到这样的效果，需要使用颜色值的另一种表示方法。例如内置alpha组件的CSS rgba函数。