1：根基概念
Canvas是HTML5的一个新特征，canvas又叫做画板。顾名思义，我们能够在canvas上绘制我们需要的图形。最起头，canvas它是由苹果公司提出的，其时不叫canvas，叫widget，因为HTML并不存在一套二维的画图API。Canvas自己是一个HTML元素，需要HTML元素的合营高度和宽度属性而界说出的一块可绘制区域，界说区域之后使用JavaScript的剧本绘制图像的HTML元素。
它能够根基的绘制图形，进一步的建造照片，绘制动画，更进一步能够处理和衬着视频。（应用场景）2：浏览器兼容
3：
是一个元素
canvas有两个属性，一个是宽度（width），一个是高度（height）。宽度和高度能够使用内联的属性，如下所示：<canvas width="300px" height="150px" id="canvas">
您的浏览器不支撑Canvas
<img src="./backup.jpg"></canvas>
4：坐标系统
5：预备画布，Rending Context(衬着上下文 - 画笔)const canvas = document.getElementById('canvas');
/* 获得 2d 上下文对象 */
const ctx = canvas.getContext('2d');
6：绘制画布
原生绘制API
原生画图API有三个：
fillRect(x, y, width, height) 填充矩形
strokeRect(x, y, width, height) 矩形边框
clearRect(x, y, widh, height) 清空ctx.fillRect(0, 0, 50, 50);
ctx.strokeRect(50, 50, 100, 100);
ctx.clearRect(10, 10, 30, 30);
绘制线段 - Pathctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 150);
ctx.closePath();
ctx.stroke();
绘制三角形 - Pathctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 0);
ctx.lineTo(150, 150);
ctx.closePath();
ctx.fill();
绘制圆/圆弧- Patharc(x, y, radius, startAngle, endAngle, anticlockwise)ctx.beginPath();
ctx.moveTo(0, 0);
ctx.arc(150, 75, 50, 0, Math.PI / 2, false);
ctx.stroke();
arcTo(x1, y1, x2, y2, radius)ctx.beginPath();
ctx.moveTo(0, 0);
ctx.arcTo(100, 100, 400, 100, 400);
ctx.stroke();
贝塞尔曲线 - Path
cubic-bezier(n1,n2,n3,n4)
p0(0,0)
p1(1,1)
p2(n1,n2)
p3(n3,n4)ctx.beginPath();
ctx.bezierCurveTo(0, 123, 100, -9, 100, 100);
ctx.stroke();
