在渲染复杂的动效、把数据可视化图形显示、游戏场景等需求，都会用canvas技术，比dom操作性能更高。
特点：
1.H5新增的图形标签，通过提供的JavaScript函数绘制各种图表或利用算法实现非常华丽的动效。
2.在以前是用Flash技术实现，但不能和JS交互
3.适合动态图形绘制
缺点：
是位图，缩放会模糊
API：
环境 目前只有2d绘制，getContext("2d") 创建2d绘制环境
一、canvas2d
rect(x, y, w, h) 绘制矩形
stroke() 以边框线的方式绘制图形，默认填充黑色
canvas{
/*样式会放大，不能用*/
/*width: 500px;*/
/*height: 500px;*/
border: 1px solid red;
}
<canvas width="500" height="500"></canvas>
let oC = document.querySelector("canvas");
let cxt = oC.getContext("2d");
cxt.rect(50, 50, 100, 50);
cxt.stroke(); //绘制边框矩形，空心矩形
二、实心矩形
fill() 以填充的方式绘制图形，默认填充黑色
cxt.fill(); //填充矩形颜色
三、fillRect与strokeRect
fillRect(x, y, w, h) 绘制填充实心矩形
strokeRect(x, y, w, h) 绘制空心矩形
cxt.fillRect(50, 50, 100, 50);
cxt.strokeRect(200, 100, 150, 100);
四、clearRect
clearRect(x, y, w, h) 清除矩形选区
let oC = document.querySelector("canvas");
let cxt = oC.getContext("2d");
let n = 0;
fn();
function fn(){
n++;
cxt.clearRect(0, 0, 500, 500);
cxt.strokeRect(n, 50, 100, 50);
requestAnimationFrame(fn);
}
五、样式
fillStyle 填充颜色
strokeStyle 触笔颜色
lineWidth 触笔粗细(线宽)
let oC = document.querySelector("canvas");
let cxt = oC.getContext("2d");
//从中间开始绘制，边框大小会一平分，0.5显示不出来自动被分为一半
cxt.lineWidth = 0.5;
cxt.strokeStyle = "red";
cxt.strokeRect(49.5, 49.5, 150, 100);
cxt.fillStyle = "blue";
cxt.fillRect(50, 100, 150, 100);
六、线条
绘制线条
moveTo(x,y) 从x,y开始绘制
lineTo(x,y) 绘制到x，y
图形路径
beginPath() 开始路径
closePath() 结束路径
//从什么坐标开始绘制
//绘制到哪里
cxt.beginPath();
cxt.moveTo(0, 100);
cxt.lineTo(300, 100);
cxt.lineTo(400, 200);
cxt.lineTo(100, 200);
//cxt.lineTo(0, 100);
cxt.closePath();
cxt.stroke();
//图形（路径）之间会有影响，默认会接着上一个路径开始绘制，继承
cxt.beginPath();
cxt.strokeStyle = "red";
cxt.lineTo(60, 350);
cxt.lineTo(100, 450);
cxt.lineTo(300, 450);
//cxt.lineTo(60, 350);
cxt.closePath();
cxt.stroke();
七、图形边界端点样式
图形边界样式属性
lineJoin 边界连接点样式：miter(默认值)、round(圆角)、bevel(斜角)
lineCap 端点样式：butt(默认值)、round(圆角)、square(高度多出线宽一半)
cxt.lineJoin = 'bevel';
cxt.lineCap = 'square';
八、arc
绘制圆形
arc(x,y,r,0,360,false)
x,y 圆心坐标位置
r 圆半径
0,360 从0度到360度所对应的弧度 (弧度: 角度值*Math.PI/180)
true/false 逆时针/顺时针绘图
cxt.beginPath();
cxt.arc(250, 250, 150, 0, -90*Math.PI/180, true);
cxt.stroke();
九、translate
变换：translate(x,y) 重新定义坐标原点基准点
cxt.beginPath();
cxt.translate(250, 250);
cxt.arc(0, 0, 150, 0, 6.3);
cxt.stroke();
十、rotate与scale
rotate 旋转角度所对应的弧度：弧度公式：角度*PI/180
scale(1,1) 缩放图形宽高
cxt.beginPath();
cxt.scale(2, 1);
cxt.rotate(10*Math.PI/180);
cxt.fillRect(200, 150, 150, 90);
十一、
独立路径 不影响上下文路径
save() 保存路径
restore() 恢复路径
cxt.save();
cxt.beginPath();
cxt.lineWidth = "10";
cxt.strokeStyle = "red";
cxt.moveTo(100, 50);
cxt.lineTo(190, 140);
cxt.stroke();
cxt.restore();
//使每个路径成为独立的路径，之间不会有影响
cxt.save();
cxt.beginPath();
cxt.arc(250, 250, 100, 0, 6.3);
cxt.stroke();
cxt.restore();
//先进后出，后进先出
cxt.fillStyle = "blue";
cxt.fillRect(100, 50, 100, 50);
cxt.save();
cxt.fillStyle = "yellow";
cxt.fillRect(100, 130, 100, 50);
cxt.save();
cxt.fillStyle = "orange";
cxt.fillRect(100, 200, 100, 50);
cxt.save();
cxt.restore();
cxt.fillRect(220, 50, 100, 50);
cxt.restore();
cxt.fillRect(220, 130, 100, 50);
cxt.restore();
cxt.fillRect(220, 200, 100, 50);
