<canvas> 是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染
<canvas> 有width和height属性，默认 width为300、height 为 150，单位都是 px 也可以使用 css 属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用 css 属性来设置 <canvas> 的宽高，建议使用width和height属性即可
/** @type {HTMLCanvasElement} */
把上面这行代码写在script里面时，绘制的时候会出现代码提示
首先声明一个变量接收body里面的<canvas>标签
var can = document.getElementById('can');
在声明一个变量获取绘制对象
var ctx = can.getContext('2d');
接下来就是绘制了
矩形
// fillRect 填充矩形
// 在坐标点 20 20 的位置 画一个200 200的距离
ctx.fillRect(20,20,200,200);
// 设置颜色 从那设置之后的颜色都改变
ctx.fillStyle = 'red';
ctx.fillRect(200,200,100,100);
// clearRect 清除 在坐标0 0的位置开始清除 清除范围100 200
ctx.clearRect(0,0,100,200)
// 如果后面的俩个参数 设置的是整个画布的大小 表示清除全部
ctx.clearRect(0,0,500,500)
线条
// strokeStyle 设置线的颜色
ctx.strokeStyle = 'red';
// lineWidth 画笔的粗细
ctx.lineWidth = 10;
// 准备开始
ctx.beginPath();
// 先将笔移动到50 50 的位置
ctx.moveTo(50,50); //落笔点
// 画到某个点
ctx.lineTo(100,100);
ctx.lineTo(20,100);
// 闭合 如果闭合的话就会在开始和最后的点加上一条线
ctx.closePath();
// 填充颜色 如果填充之前不设置颜色 默认填充黑色
ctx.fillStyle = "yellow";
ctx.fill();
// 画线
ctx.stroke();
// 圆形
ctx.beginPath();
// 参数依次是
// x 坐标
// y 坐标
// 半径
// 开始角 弧的三点钟位置 是0度
// 六点钟的位置 是0.5*Math.PI，九点钟的位置 是1*Math.PI，十二点钟的位置 是1.5*Math.PI
// 结束角
// 默认顺时针为false 设置为true 逆时针
ctx.arc(240,240,100,0.5*Math.PI,1*Math.PI,true);
ctx.st = 'red'
ctx.lineWidth = 10;
ctx.stroke();