Question

• 标签 <canvas>
  • 不支持 canvas 的浏览器可以看到的内容
  • 默认宽度 300px ，默认高度 150px
  • 注意： canvas 宽高需要设置在标签中 否则绘制的东西可能出错
• <canvas> 绘制环境
  • getContext("2d") ;目前支持 2d 的场景

<canvas width="" height="" id="">
您的浏览器不支持 canvas，请更换浏览器！
</canvas>

• 绘制矩形
  • rect(L,T,W,H) :创建一个矩形
  • fillRect(L,T,W,H) :绘制填充的矩形
  • clearRect(x,y,w,h) 清除矩形选区
  • strokeRect(L,T,W,H) 绘制空心矩形（无填充)
    • 默认一像素黑色边框
• 设置绘图样式
  • fillStyle :填充颜色（绘制 canvas 是有顺序的)
  • lineWidth :触笔宽度（线宽)
  • strokeStyle :触笔颜色
• 绘制路径
  • beginPath() :开始路径
  • closePath(): 结束路径
  • moveTo(x,y) :将触笔移动到 x,y 点
  • lineTo(x,y) :绘制到 x,y 点
  • stroke(): 触笔方法 画线 默认为黑色
  • fill() :填充方法
  • rect(x,y,w,h) :矩形路径
  • save() :保存路径
  • restore() :恢复路径
• 绘制曲线
  • arcTo(x1,y1,x2,y2,r)
    • x1 , y1 坐标一 x2 , y2 坐标二 r 圆弧半斤
  • quadraticCurveTo(dx,dy,x1,y1)
    • 贝塞尔曲线: dx , dy 控制点 x1 , y1 结束坐标
  • bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)
    • 贝塞尔曲线: dx1,dy1 控制点一 dx2,dy2 控制点二
    • x1,y1 结束坐标
• 绘制圆形
  • arc(x,y,半径，起始弧度，结束弧度，旋转方向)
    • x ， y 起始位置
    • 弧度与角度： 弧度=角度值*Math.PI/180
    • 旋转方向：顺时针（默认： false ），逆时针（ true ）
• 绘制文本
  • strokeText(文本,x,y) ; 绘制空心文本
  • fillText(文本,x,y) ; 绘制实心文本
  • font = "font-size font-family" 注:尺寸 字体缺一不可
    • textAlign = ""; 文本左右对齐方式 start center end left right
    • textBaseline 文本上下对齐方式
      • alphabetic 默认。文本基线是普通的字母基线。
      • top 文本基线是 em 方框的顶端。。
      • hanging 文本基线是悬挂基线。
      • middle 文本基线是 em 方框的正中。
      • ideographic 文本基线是表意基线。
      • bottom 文本基线是 em 方框的底端。
      • measureText(文本).width; 文本实际宽度（只有宽度值)

• 图形边界样式
  • lineJoin : 边界连接点样式
    • miter (默认值), round (圆角), bevel (斜角)
  • lineCap : 端点样式
    • butt (默认值), round (圆角), square (高度多出线宽一半)
• 绘制图片
  • 图片预加载，获取图片文件
    • onload 中调用
    • drawImage(img,x,y,w,h); 绘制图片（图片，坐标 x ,坐标 y ,宽度，高度)
  • 设置背景
    • createPattern(img,平铺方式)
    • 平铺方式: repeat , repeat-x , repeat-y , no-repeat
• canvas 变换
  • translate(x,y)
    • 坐标基准点偏移 : 从起始点为基准，移动到当前位置
  • rotate(弧度) : 旋转 弧度公式 = 角度*PI/180
  • scale(wb,hb) 缩放比例（缩放 canvas 绘制的图片)
• 颜色渐变
  • 线性渐变: createLinearGradient(x1,y1,x2,y2)
    • x1 , y1 起始坐标点
    • x2 , y2 结束坐标点
  • 径向渐变: createRadialGradient(x1,y1,r1,x2,y2,r2)
    • x1 , y1 , r1 内圆坐标及半径
    • x2 , y2 , r2 外圆坐标及半径
    • addColorStop (位置，颜色) 位置:渐变点 0-1 之间 可多个
• 阴影
  • shadowOffsetX , shadowOffsetY x 轴、 y 轴偏移
  • shadowBlur 阴影模糊度
  • shadowColor 阴影颜色 默认颜色: rgba(0,0,0,0)
• 像素
  • createImageData(sx,sy) 创建新的、空白的 ImageData 对象
  • getImageData(x1,y1,sx,sy)
    • 返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据 putImageData(img,x2,y2)
    • 把图像数据（从指定的 ImageData 对象）放回画布上
• 合成
  • globalAlpha 设置或返回绘图的当前 alpha 或透明值
  • globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上
  • source-over 默认。在目标图像上显示源图像。
  • source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
  • source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
  • source-out 在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
  • destination-over 在源图像上方显示目标图像。
  • destination-atop 在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
  • destination-in 在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
  • destination-out 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
  • lighter 显示源图像 + 目标图像。
  • copy 显示源图像。忽略目标图像。
  • xor 使用异或操作对源图像与目标图像进行组合。

• 扩展阅读
  • canvas 学习之 API 整理笔记（一）
  • HTML5 API 大盘点