canvas

径向渐变

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就可以了。除非需要特别长的尖角时，使用此属性。