前言
canvas是html5中新增的标签元素，用于定义图形，如图标和其它图形，canvas相当于一个画布，绘制图形要通过js脚本来实现；
目前大部分主流高版本浏览器已支持canvas功能~
创建canvas画布仅需如下代码即可：
<canvas></canvas> // 标签内部无需加内容
<canvas>对不起，您的浏览器不支持canvas标签，请使用高版本浏览器</canvas> // 对于不识别的低版本浏览器，就会显示出此提示文字使用方法
具体使用主要有以下几个步骤：
- 创建画布
<canvas></canvas>注意：画布的大小默认是150宽，100高，但是要改变画布大小，就一定要在canvas这个对象身上改变他的宽高，而不能在style上面直接更改~
<canvas width="200" height="500"></canvas> // 此方法可行
<style>
canvas {
width: 200px;
height: 500px;
}
</style> // 此方法就会拉糊画面，不可取- 获取canvas标签
var canvas = document.getElementById('canvas');
- 获取上下文对象
var ctx = canvas.getContext('2d'); // 相当于拿到了画画的工具箱- 开启一条路径
ctx.beginPath(); 即表示从此处开始作画- 画图（注意：这一步画布上并未有轨迹）
ctx.rect(40, 40, 120, 200) // 画一个矩形- 着色（注意：这一步画布上才有轨迹）
ctx.stroke(); // 空心的轨迹其它功能
- 清除画布
清除画布即是橡皮擦功能，可以将画布中内容抹掉；
clearRect(x, y, width, height); // 清除画布- 画直线
moveTo(x1,y1) // 起点坐标
lineTo(x2,y2) // 终点坐标- 画文字
fillText(text, x, y); // text是文字内容，x，y是坐标，画出来的是被填充的文字
strokeText(text, x,y); // 画出来的是空心的文字
textAlign = center|end|left|right|start // 分别表示在指定位置开始| 在指定位置结束 | 文本的中心被放置在指定位置 | 在指定位置开始 | 在指定位置结束 例：
// Create a red line in position 150
ctx.strokeStyle="red";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.font = '14px 微软雅黑'
ctx.stroke();
// Show the different textAlign values
ctx.textAlign="start";
ctx.fillText("textAlign=start",150,60);
ctx.textAlign="end";
ctx.fillText("textAlign=end",150,80);
ctx.textAlign="left";
ctx.fillText("textAlign=left",150,100);
ctx.textAlign="center";
ctx.fillText("textAlign=center",150,120);
ctx.textAlign="right";
ctx.fillText("textAlign=right",150,140); 
- 渐变效果
createLinearGradient(x1,y1,x2,y2) // 创建渐变，x1，y1是渐变开始的位置，x2,y2是渐变结束的位置
addColorStop(stop,color) // 用于设置渐变对象中的颜色和位置，stop的值范围从0-1，表示渐变中开始与结束之间的位置
例：
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
var grd = ctx.createLinearGradient(0,0,200,200);
grd.addColorStop(0.1, 'red');
grd.addColorStop(0.3, 'yellow');
grd.addColorStop(0.5, 'green');
grd.addColorStop(0.7, 'orange');
grd.addColorStop(1, 'pink');
// 应用渐变
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
- 转移中心点
translate(x,y) // 重新映射画布上的(x,y)坐标位置- 绘制图片
ctx.drawImage(img,x,y) // 在画布上定位图像 img是要放置的图片 x，y是放置的坐标
ctx.getImageData(x,y,w,h) // 拷贝画布中指定矩形的像素数据 x，y是坐标 w，h是大小
ctx.putImageData(imgData,x,y) // 将图像数据放回画布上，imgdata为规定要放回画布的对象 x y是要放置的坐标