<canvas id = "drawing">你的浏览器不支持canvas</canvas>
当浏览器不支持canvas的时候，就会显示"你的浏览器不支持canvas"；
首先获取元素：var canvas= document.getElementById("drawing");
然后设置宽高：canvas.width = 200; canvas.height = 200;
然后判断getContext()是否存在（浏览器不支持就没有）：
if (canvas.getContext) {};
2D上下文
var ctx = canvas.getContext("2d");
描边、填充：
ctx.stroke(); // 描边
ctx.fill(); // 填充
ctx.strokeStyle = "颜色"; // 描边颜色
ctx.fillStyle = "颜色"; // 填充颜色
矩形：
ctx.rect(x,y,width,height); // 矩形（空白）
ctx.strokeRect(x,y,width,height); // 描了边的矩形
ctx.fillRect(x,y,width,height); // 填充颜色的矩形
ctx.clearRect(x,y,width,height); // 清除该范围内的内容
圆弧：
ctx.arc(x, y, r, 开始角度, 结束角度, 方向)
例如：ctx.arc(100, 100, 50, 0, 2*Math.PI, true)；以圆心为（100,100）创建一个半径为50的圆（0~2π），true为逆时针
绘制路径：
ctx.beginPath(); // 开启新路径
ctx.moveTo(x,y); // 移动画笔
ctx.lineTo(x,y); // 绘制轨迹（添加一个点）
ctx.lineWidth = 10; // 设置边宽
ctx.closePath(); // 关闭路径
ctx.stroke() / ctx.fill() // 描边或填充
注意：画出来的线有点粗，而且也不是纯黑
原因：
分成两个0.5px，饱和度降低，但是显示屏没有0.5px，所以是两个1px，饱和度降低（这里是网上找的，来源忘了）
解决：moveTo(100,100.5) 不要在两个格子之间就可以了（不过一般都不修改）
文字：
var text = "123456";
var width = ctx.measureText(text).width; // 测量文字（字符串）的长度
ctx.fillText(text, 10, 10); // 在（10,10）处开始写文字
ctx.font = "12px Microsoft"; // 设置字体
ctx.textBaseLine = "bottom"; // 设置字体基线
线条样式：
ctx.lineJoin = "round"; // 设置圆形边角（bevel 切了一块角 不会描述）
ctx.lineCap = "round"; // 在前后两端追加圆形线帽（square 正方形线帽）
ctx.setLineDash(arr); // 设置虚线，arr为一组交替的线条和间距长度，[5,10,15]，例如这个数组，5就是线条长，10就是间距长，如果数组元素是奇数的会复制，[5,10,15,5,10,15]直到刚好循环
ctx.getLineDash(); // 获取虚线规律
ctx.lineDashOffset = 20; // 向左偏移
ctx.canvas.width/height; // 获取画布宽高
渐变：
渐变有两种：①线性渐变createLinearGradient ②径向渐变createRadialGradient
var grd = ctx.createLinearGradient(x1,y1,x2,y2); // 创建方向（这里的两个坐标，就像是在PS中创建渐变一样，从一个点拉向另外一个点）
grd.addColorStop(0, "black"); // 添加颜色（PS中添加点，然后设置该点的颜色）
grd.addColorStop(1, "white");
ctx.fillStyle = grd; // grd作为填充样式
ctx.fillRect(0, 0, 100, 100); // 创建矩形（这就是渐变矩形）
图片：
var img = new Image();
img.onload = function() {
方式1：ctx.drawImage(img, x, y);
方式2：ctx.drawImage(img, x, y, width, height);
方式3：ctx.drawImage(img, sx, sy, swidth, sheight, x, y, width,height);
img：图片对象；sx、sy：剪切位置；swidth、sheight：剪切宽高；x、y：图片在画布位置；
width、height：图片大小（就是缩放）
方式4：var pattern = ctx.createPattern(img, "repeat"); // 这里与background-repeat相同
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 100, 100); // 创建一个矩形，然后填充图片
}
img.src = "xxx.img";
必须要等图片加载完才可以用，所以得用onload事件
变换：
ctx.setTransform(1, 0, 0, 1, 0, 0); // 重置并创建新的变换矩形
ctx.transform(a, ,b, c, d, e, f);
a：水平缩放 b：水平倾斜 c：垂直倾斜 d：垂直缩放 e：水平移动 f：垂直移动
平移：ctx.transform(1, 0, 0, 1, 20, 20); // 平移到（20,20），相当于ctx.translate(20,20)
旋转：ctx.transform(Math.cos(θ), Math.sin(θ), -Math.sin(θ), Math.cos(θ), 0, 0);
// 以画布原点旋转θ°，相当于ctx.rotate(θ°);
缩放：ctx.transform(2, 0, 0, 2, 0, 0); // x轴坐标和y轴坐标缩放两倍，相当于ctx.scale(2,2);
可以组合使用，例如旋转30°放大两倍，var θ = Math.PI/180 * 30;
ctx.transform(2*Math.cos(θ), Math.sin(θ), -Math.sin(θ), 2*Math.cos(θ), 0, 0)
参考：https://blog.csdn.net/caonidayeheixiu8/article/details/78436308
阴影：
ctx.shadowColor = "颜色"; // 设置阴影颜色
ctx.shadowBlur = 20; // 设置阴影模糊级数
ctx.shadowOffsetX; // 阴影往x轴方向偏移
ctx.shadowOffsetY; // 阴影往y轴方向偏移
切割：
ctx.clip(); // 以上一句代码为区域，在clip之后画的东西只能在这个区域显示
例如：ctx.strokeStyle = "red";
ctx.save(); // 保存这句代码之前的状态
ctx.rect(0, 0, 100, 100); // 创建一个矩形区域
ctx.clip(); // 切割区域
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.arc(100, 100, 100, 100, 0, 2*Math.PI, false); // 此时显示的是这个圆在矩形区域的内容
ctx.stroke();
ctx.closePath();
ctx.restore();// 回到save时候的状态，也就是接下来，如果不重新设置描边颜色，描边颜色为红色，而不是蓝色
也从侧面上解除了区域限制
图像数据：
var createImgData = ctx.createImageData(50, 50); // 创建一个空的、宽高都为50的ImageData对象
var imgData = ctx.getImageData(10, 10, 50, 50); // 参数与矩形一样，获取该矩形区域内的像素数据，返回ImageData对象
ImageData对象有三个属性：width，height，data
data数组，保存着区域中每个像素的数据，data[0]为red，data[1]为green，data[2]为蓝，data[3]为alpha
每4个data元素组成一个像素的rgba颜色，遍历imgData.data就可以的到这个区域中所有的像素颜色（也可以设置）
for (var i=0;i<imgData.data.length;i+=4){
imgData.data[i+0]=0;
imgData.data[i+1]=0;
imgData.data[i+2]=255;
imgData.data[i+3]=255;
}
ctx.putImageData(imgData, 100, 100); // 将imgData对象中的像素数据放在（100,100）
得到的是一个与blue一样的颜色
globalAlpha：获取或设置alpha值