径向渐变
grd=createRadialGradient(x0,y0,r0,x1,y1,r1)
grd.addColorStop(位置，color)
绘制背景图
- 把图片填充为背景
var img=document.getElementById('img')
img.src='1.jpg
var pattern=cxt.createPattern(img,repeat-x/repead-y/repeat/no-repeat)
加载图片需要写在window.onload=function(){}里
变换（对绘图环境进行变换）
-
缩放scale( scalewidth，scaleheight)
- oscalewidth : 缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)
- scaleheight : 缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.)
注意：缩放的是整个画布，缩放后，继续绘制的图形会被放大或缩小
-
位移translate(x,y)，重新映射画布上的（0,0）位置；
- x:添加到水平坐标（x）上的值
- y:添加到垂直坐标（y）上的值
- 发生位移后，相当于把画布的0,0坐标 更新到新的写x,y的位置，所有绘制的新元素都被影响
-
rotate(弧度)
- 如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算
绘制环境保存和还原
- save() 保存当前绘图环境
- restore()恢复之前的绘图环境
设置透明度
- globalAlpha=number 设置不透明度（0透明，1不透明）
- 全局设置是对整个画布（绘图环境）进行设置
画布限定区域绘制
- clip()方法从原始画布中剪切任意形状和尺寸
- 一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内，不能访问画布上的其他区域
画布保存base64编码内容
- 把canvas绘制的内容输出成base64内容
- canvas.toDataURL(type，encoderOptions);
eg:
var canvas=document.getElementById('mycanvas')
canvas.toDataURL(image/ipg,1) - 参数说明：
- type，设置输入的类型，image/png,image/jpeg等
- encoderOptions：0-1之间的数字，用于标识图片的质量，1表示无损压缩，o类型为： image/jpeg 或者image/webp才起作用。
画布渲染画布
- context.drawImage(img,x,y)
- img也可以是一个画布整体的渲染到另一个画布上
线条样式
- lineCap 设置或返回线条的结束断点（线头、线冒）样式
- butt:默认，向线条的每个末端添加平直的边缘。
- oround ： 向线条的每个末端添加圆形线帽。
- square： 向线条的每个末端添加正方形线帽。
- lineJoin 设置或返回两条线相交时，所创建的拐角类型
- bevel:创建斜角。
- round: 创建圆角.
- miter: 默认。创建尖角
- miterLimit 设置或返回最大斜接长度
- 斜接长度指的是在两条线交汇处内角和外角之间的距离。
- 一般用默认值：10就可以了。除非需要特别长的尖角时，使用此属性。
