参考
Canvas的基本用法
HTML5 Canvas
HTML5 Tricks
知识点
<canvas>元素
定义
用于绘制图形，需要结合脚本来实现，即是canvas元素是绘制图形的容器，需要利用脚本来实现图形的绘制；
属性
canvas元素实际只有： width,height两个属性，但可以通过DOM Property来设置；
注意：
若是创建
canvas元素时未指定高度和宽度，则会一默认的尺寸（宽：300px, 高： 150px）；canvas的尺寸也可以通过CSS来设置，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲，出现这种情况，尝试设置canvas的宽度和高度，不适用CSS;
canvas VS img
-
canvas没有src,alt属性； -
canvas元素是双标签元素，必须闭合，若缺少闭合标签，文档的其余内容会被认为是替代内容（浏览器不支持canvas元素时显示的内容），不会显示；而img是单标签元素；
渲染上下文（The rendering context）
<canvas>元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。
默认情况下，canvas创建的画布是空白的，故在使用时，需要执行下述操作：
- 获取DOM对象
<canvas id="myCanvas" width="800" height="800"></canvas>
var myCanvas = document.getElementById('myCanvas');
- 通过'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；
image
作者：小人物的秘密花园
链接：https://www.jianshu.com/p/22e39490fc4c
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
