如何使用Canvas

分享人：陈杰超

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.参考文献

7.更多讨论

Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。

Canvas 对象表示一个 HTML 画布元素--<canvas>。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。

绘制基本图形: canvas只支持一种原生的矩形绘制，所有其他图形都至少需要生成一种路径。

绘制一个填充的矩形，填充的默认颜色为黑色
fillRect(x, y, width, height)

绘制一个矩形的边框
strockRect(x, y, width, height)

清除指定矩形区域，然后这块区域会变得完全透明
clearRect(x, y, widh, height)

首先，在HTML元素中定义一个canvas标签

var canvas = document.getElementById('tutorial');

var ctx = canvas.getContext('2d');

图形的基本元素是路径。
路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。

步骤如下
1.创建路径起始点
2.调用绘制方法去绘制出路径
3.把路径封闭
4.一旦路径生成，通过描边或填充路径区域来渲染图形。