基础特点

特性

• html5新增canvas标签用于绘制图像，通过脚本绘制图像
• canvas仅仅是图形容器，没有绘图功能
• 可以绘制路径、矩形、圆、文本等

---

两种绘图方式

• 笔触 stroke
• 填充 fill

---

两种样式

• 颜色、阴影

颜色fillStyle strokeStyle 【颜色、渐变或模式】
阴影设置shadowColor shadowBlur shadowOffsetX shadowOffsetY

• 线条样式

lineGap 设置或返回线条的结束端点样式 属性值有butt平直边缘、round圆角、square矩形圆角
lineJoin 设置或返回两条线相交时，所创建的拐角类型 属性值 bevel斜角 round圆角 miter尖角
lineWidth 设置或返回当前线条宽度
miterLimit 设置或返回最大斜接长度

---

对象

• 1.canvas对象

var x = document.getElementById
var x = document.createElement（'CANVAS'）

• 2.context对象,提供了用于在画布上绘图的属性和方法

var ctx = x.getContext('2d')

• 3.渐变对象 Gradient

两种创建方法createLinearGradient和createRadialGradient
规定渐变对象中颜色和停止位置addColorStop， 第一个参数介于0到1之间

• 4.模式pattern

createPattern 在指定方向上重复指定元素
参数
    元素可以是图片、视频或其他canvas元素
    重复 repeat repeat-x repeat-y no-repeat
构成的元素可以是strokeStyle或fillStyle属性，用来填充线条、矩形、圆形等

---

绘制图形方法

矩形

• 1. rect 创建矩形，但没绘制 ，需要fill或stroke实际绘制 x y width height
• 2. fillRect 绘制被填充的矩形
• 3. strokeRect 绘制矩形框
• 4. clearRect 在给定的矩形内清除指定的像素

---

路径

• 1. fill 填充图形或路径绘制的图形，没闭合则强制闭合，用当前的fillStyle填充
• 2. stroke 绘制通过moveTo和lineTo定义的路径，用当前的strokeStyle属性绘制
• 3. beginPath 开始新路径
• 4. moveTo 移动起始点
• 5. closePath 关闭路径
• 6. lineTo 路径点
• 7. clip 剪切
• 8. quadraticCurveTo
• 9. bezierCurveTo
• 10. arc 创建弧线 x,y,r,sAngle,eAngle,counterclockwise
• 11. arcTo 创建两切线之间的弧线
  • 上一个路径点和第一个控制点构成切线1
  • 第一个控制点和第二个控制点构成切线2
  • 两个切线求相切的弧
• 12. isPointInPath 判断点是否在当前路径中

---

文本

• 1. font 字体属性
• 2. textAlign 对齐方式
  • start 文本在指定位置开始
  • end 文本在指定位置结束
  • center 文本中心在指定位置
  • left 左对齐
  • right 右对齐
• 3. textBaseline 文本基线
  • alphabetic
  • top 文本基线是 em 方框的顶端。
  • hanging 文本基线是悬挂基线。
  • middle 文本基线是 em 方框的正中。
  • ideographic 文本基线是表意基线。
  • bottom 文本基线是 em 方框的底端。
• 4. fillText 填充绘制字体
• 5. strokeText 镂空绘制字体
• 6. measureText 返回指定文本宽度的对象

---

图像绘制

• 1. drawImage 向画布上绘制图像 画布或视频

---

像素

• 1. width 返回imageData对象的宽度
• 2. height 返回imageData对象的高度
• 3. data 返回一个对象 ，其包含指定的ImageData对象的图像数据
• 4. createImageData 创建新的空白的ImageData对象
• 5. getImageData 返回imageData对象，该对象为画布上指定的矩形复制像素数据
• 6. putImageData处理把图像数据从指定的imageData对象放回画布上

---

合成

• 1. globalAlpha 设置或返回绘图的当前alpha或透明纸
• 2. globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上

---

转换

• 1. scale 缩放当前绘图最大或最小
• 2. rotate 旋转
• 3. translate 重新映射
• 4. transform 替换绘图的当前矩阵
• 5. setTransform 将当前转换重置为单位矩阵，然后运行transform

---

其他

• 1. save 保存
• 2. restore 重置
• 3. createEvent
• 4. getContext
• 5. toDataURL