[QuickStart]使用canvas简单绘图

QuickStart of Canvas

Tip：
var drawing = document.creatElement("img"); – 获取到“画布”
var context = drawing.getContext("2d")
获取到2d上下文，画画操作是对上下文操作

1. 标签属性：canvas标签必须先指定绘图区域width、height属性，标签中的信息为浏览器不支持canvas显示的信息
2. 坐标：2D图像上下文始于左上角，坐标为(0,0)，竖直向下为y正，水平向右为x正
3. 基本操作：两种 – 填充（颜色，图像，渐变）、描边（画线）
   a. 将填充/描边内容值（字符串/渐变对象/模式对象）赋给上下文的fillStyle(填充)/strokeStyle(描边)属性
   b. e.g context.fillStyle = “blue”;
   context.strokeStyle = “red”;
   将描边操作设为红色，填充操作设为蓝色，直到下次更改
4. 绘制2D图形步骤：
   pre. if(drawing.context){…}确定浏览器支持canvas元素
   a. 获取绘图上下文
   var context = drawing.getContext("2d")
   b. 绘制矩形
   context.fillRect(startX, startY, width, height) 填充矩形
   context.strokeRect(startX, startY, width, height) 描边矩形
   context.clearRect(startX, startY, width, height) 清除矩形区域
   c. 绘制路径
   i. 先在context上下文变量上调用beginPath()方法
   ii. lineTo(x,y) 从上一点开始绘制一条直线到(x, y)
   iii. moveTo(x,y) 将绘图游标移到(x,y) 不画线
   iv. 更多画图api在红宝书第三版中文版P449
   v. 想绘制一条连接到路径起点的的线条：使用closePath()
   vi. 绘制完成后：（不调用路径或围城区域啥的都不显现）
5. 调用fill()方法使用fillStyle填充
6. stroke()方法使用strokeStyle描路径
7. clip()方法在路径上创建一个剪切区域

• Api
toDataURL(“image/png”) – 将canvas图像导出成图像，需传入图片格式为参数