参考

Canvas的基本用法
HTML5 Canvas
HTML5 Tricks

知识点

<canvas>元素

定义

用于绘制图形，需要结合脚本来实现，即是canvas元素是绘制图形的容器，需要利用脚本来实现图形的绘制；

属性

canvas元素实际只有： width,height两个属性，但可以通过DOM Property来设置；

注意：

1. 若是创建canvas元素时未指定高度和宽度，则会一默认的尺寸（宽：300px, 高： 150px）；

2. canvas的尺寸也可以通过CSS来设置，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲，出现这种情况，尝试设置canvas的宽度和高度，不适用CSS;

canvas VS img

1. canvas没有src,alt属性；
2. canvas元素是双标签元素，必须闭合，若缺少闭合标签，文档的其余内容会被认为是替代内容（浏览器不支持canvas元素时显示的内容），不会显示；而img是单标签元素；

渲染上下文（The rendering context）

<canvas> 元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。

默认情况下，canvas创建的画布是空白的，故在使用时，需要执行下述操作：

1. 获取DOM对象

<canvas id="myCanvas" width="800" height="800"></canvas>

var myCanvas = document.getElementById('myCanvas');

2. 通过'canvas'的getContext()方法获取渲染上下文及其绘画功能

var oContext = myCanvas .getContext('2d');

说明：getContext()只有一个参数，上下文的格式;

检测浏览器是否支持

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

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // 其他操作
} else {
  // 不支持的操作
}

canvas栅格画布及空间坐标系

Canvas的坐标以左上角为原点(0,0)，水平向右为X轴，垂直向下为Y轴，以像素为单位，所以每个点都是非负整数

栅格画布中每个单元格相当于canvas元素中的1px；

canvas坐标系.png