JS操作canvas
1
为优化图片质量，不要在HTML中使用width和height属性设置画布的屏幕大小。而要使用CSS的样式属性width和height来设置画布在屏幕上的预期大小。然后在JS开始绘制前，再将画布对象的width和heigh属性设置为CSS像素乘以window.devicePixelRatio。
Title
图 代码实现效果
1.1 save()、restore()与beginPath()
beginPath() 开始一条路径或重置当前路径，表示重新开始一个新的路径内容。
图 beginPath演示效果图
save()方法把当前的图形状态（不包括当前定义的路径和当前的点）推到一个保存到状态栈中，而restore()方法则从该栈中弹出状态。
图 store() 演示效果图
1.2 渐变色
需要将fillStyle（或strokeStyle）设置为CanvasGradient对象。上下文有两个方法用于创建这个对象：
1）createLinearGradient(),参数是定义一条直线的两个点的坐标，颜色将在这条直线的方向上渐变。
2）createRadialGradient(),需要指定两个圆心和半径（着两个圆不一定是同心圆），小圆内部区域或大圆外部区域将被实色填充，这两个区域之间的部分则会以渐变色填充。
在创建这个对象后，必须调用该对象的addColorStop()方法定义渐变色。第一个参数是一个介于0.0和1.0之间的数值，第二个参数是一个CSS颜色说明。至少必须调用这个方法两次。
图 渐变色实现效果
1.3 坐标系转换
translate()方法简单地向左、右、上、下移动坐标系原点。rotate()方法按照指定角度旋转坐标轴。scale()方法沿x轴或y轴拉伸或压缩距离（给scale()方法传入一个负缩放因子会围绕原点反转坐标轴，就好像镜子里的倒影一样）。
图 scale 实现效果图
《JavaScript权威指南》中的科赫雪花代码：
图 科赫雪花实现效果
1.4 剪切
clip()方法定义一个剪切区域，定义后，这个区域外部将不会被绘制。它的作用是遮罩，用来隐藏没有遮罩的部分。
图 clip()演示效果图
1.5 像素操作
context的getImageDate()方法返回一个ImageData对象，表示画布中某矩形区域中包含的原始像素（包括R、G、B和A组件）。createImageData()创建空的ImageData对象，ImageData对象中的像素是可写的。putImageData()方法则是把像素复制到画布中。
图 像素操作演示效果图