Canvas上

在渲染复杂的动效、把数据可视化图形显示、游戏场景等需求，都会用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);