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)

// 如果后面的俩个参数 设置的是整个画布的大小 表示清除全部

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();