canvas 画布

 ​<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)

// 如果后面的俩个参数 设置