首先引用 MDN 上对于 canvas 的定义：
<canvas> 是 HTML5 新增的元素，可使用JavaScript脚本来绘制图形。例如：画图，合成照片，创建动画甚至实时视频处理与渲染。
也就是说这是浏览器提供给我们的一个画布和丰富的接口，可以用来制作各种复杂的效果。
<canvas> 元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文。其可以用来绘制和处理被现实的页面。
![Canvas坐标]()
这是 canvas 2d 的坐标，可以看到左上角为原点，横轴为x轴，纵轴为y轴。我们所有的canvas2d的功能实现都是在这个坐标系中。
基本用法
本文只简单介绍一下矩形、线段和圆弧的画法。
矩形
通过一个简单的例子来了解一下基本的API：
HTML:
<canvas id="canvas" style="height:100%">
当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>
|
JavaScript:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var WINDOW_WIDTH = window.screen.availWidth;
var WINDOW_HEIGHT = window.screen.availHeight;
ctx.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT)
ctx.beginPath();
ctx.fillStyle = '#000';
ctx.fillRect(10, 10, 55, 50);
ctx.fillStyle = 'rgba(0,0,200,0.5)'
ctx.fillRect(30, 30, 55, 50);
|
页面上会如下显示：
首先获取到 canvas 元素，并通过 getContext(‘2d’) 获取到它的渲染上下文。
clearRect(x, y, width, height)
清空指定区域，如果需要做动画的话，每次重新渲染前都需要调用这个函数来清除前一帧的内容。
beginPath()
新建一条路径
fillStyle
用来设置要填充的颜色
ctx.fillRect(10, 10, 55, 50);
以x轴等于10，y轴等于10为起点，绘制一个宽55高50的矩形。
strokeRect(x,y,width,height)
跟fillRect不同的地方在于，strokeRect会绘制一个矩形的边框，如下：
线段
绘制一个三角形
ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.closePath();
ctx.stroke();
|
moveTo(x,y)
定义一个起点，从这个点开始绘制
lineTo(x,y)
绘制一条从当前位置到指定x以及y位置的直线
closePath()
闭合当前路径，也可以用lineTo到起点来代替
storke()
根据已有路径的来绘制线段，也就是说如果不执行stroke(),那么画布上什么都没有。
圆弧
arc(x, y, radius, startAngle, endAngle, anticlockwise)
该方法有五个参数： x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise 为一个布尔值。为true时，是逆时针方向，否则顺时针方向。
看个直观的例子：
ctx.beginPath();
truectx.arc(75, 75, 50, 0, Math.PI * 2, true);
truectx.moveTo(110, 75);
truectx.arc(75, 75, 35, 0, Math.PI, false);
truectx.moveTo(65, 65);
truectx.arc(60, 65, 5, 0, Math.PI * 2, true);
truectx.moveTo(95, 65);
truectx.arc(90, 65, 5, 0, Math.PI * 2, true);
truectx.stroke();
truectx.clearRect(0, 0, 500, 500);
truefor (var i = 0; i < 4; i++) {
truetruefor (var j = 0; j < 3; j++) {
truetruetruectx.beginPath();
truetruetruevar x = 20 + j * 40;
truetruetruevar y = 20 + i * 40;
truetruetruevar radisu = 20;
truetruetruevar startAngle = 0;
truetruetruevar endAngle = Math.PI + (Math.PI * j) / 2;
truetruetruevar anticlockwise = i % 2 == 0 ? true : false;
truetruetruectx.arc(x, y, radisu, startAngle, endAngle, anticlockwise);
truetruetrueif (i > 1) {
truetruetruetruectx.fill();
truetruetrue} else {
truetruetruetruectx.stroke();
truetruetrue}
truetrue}
true}
|
通过这个例子可以看清楚的看到 fill 和 stroke 这个两个函数的区别，前者渲染边框，后者填充整个指定区域。同时可以区分，anticlockwise 分别 true 和 false 时渲染的机制，前者为逆时针，后者为顺时针。
总结
仅仅通过这三个基础的用法，就可以制作出很多漂亮的动画了。我这里做了一个简单运动的小球，同时做了边界判定。
参考文章： MDN-Canvas
