HTML5画布

HTML5的canvas元素使用JavaScript在网页上绘制图像 画布是一个矩形区域，可以控制其每一个像素 canvas拥有多种绘制矩形、路径、圆形、字符以及添加图像的方法 示例：

 <canvas id="canvasId" width="600px" height="400px" style="border:1px solid red;"></canvas>

script：

 /* 获取canvas元素 */
        let canvasDOM = document.getElementById('canvasId');
        /* 创建canvas对象 */
        let cavs = canvasDOM.getContext('2d');
        /* 绘制一条直线 */
        /* 设置开始点 */
        /* 距离左边100，距离顶部100 的起始点 */
        cavs.moveTo(100, 100);
        /* 距离左边300，距离顶部100的终点 */
        cavs.lineTo(300, 100);

        /* 起始点 */
        cavs.moveTo(70,200)
        /* 终点 */
        cavs.lineTo(330,200)

        /* 起始点 */
        cavs.moveTo(200,50)
        /* 终点 */
        cavs.lineTo(200,350)

        /* 起始点 */
        cavs.moveTo(130,50)
        /* 终点 */
        cavs.lineTo(80,140)

        //设置线条的颜色值
        cavs.strokeStyle = '#1ECA5F';
        //设置线条的粗细
        cavs.lineWidth = "10"

        /* 把起始点和终点连起来 */
        /* ★ stroke就是用来绘制线的或者是三角形和矩形的边框*/
        cavs.stroke();

创建和关闭路径：

 cav.beginPath();

        /* 三个点的坐标 */
        /* 等腰三角形 */
        // cav.moveTo(250,100);   /* 第一个点的位置 */
        // cav.lineTo(100,300);   /* 第二个点的位置 */
        // cav.lineTo(400,300);   /* 第三个点的位置 */

        /* 直角三角形 */
        cav.moveTo(200,100);   /* 第一个点的位置 */
        cav.lineTo(200,300);   /* 第二个点的位置 */
        cav.lineTo(400,300);   /* 第三个点的位置 */

        /* 结束绘制 */
        cav.closePath();

        cav.fillStyle = '#EA414C';
        cav.fill();
        cav.strokeStyle = '#EFD8F6';
        cav.lineWidth = '8'
        cav.stroke();

矩形：

  /* cav.beginPath(); */
//          x :  矩形起点横坐标 y : 矩形起点纵坐标
//           width : 矩形长度height : 矩形高度 
    /*  cav.rect(x,y,width,height);  */
        cav.rect(100,100,300,200);
        /* 🔺 先设置颜色再填充 */
        cav.fillStyle = 'red'
        cav.fill();
        
      /*   cav.closePath(); */

        cav.strokeStyle = 'blue';
        cav.lineWidth = 5;
        cav.stroke();

绘制矩形的额外补充：

 /* cav.fillRect(x,y,width,height)    //填充矩形 */
        /* 距离左边100，距离顶部100，宽300，高200 */
        /* 🔺 先设置颜色再填充 */
        /* 设置填充颜色 不然默认为黑色 */
        cav.fillStyle = '#EF9142'
        /* 这里的实际大小不要使用像素来计算 */
        cav.fillRect(100,100,300,200);
        
       /* cav.strokeRect(x,y,width,height)          //绘制矩形边框 */
       /* 距离左边100，距离顶部100，宽300，高200 */
       /* 先设置颜色和大小 再画矩形 */
       cav.strokeStyle = 'red';
       cav.lineWidth = 10;
       cav.strokeRect(100,100,300,200)


       /* cav.clearRect(x,y,width,height) 清除矩形区域 */

        cav.clearRect(120,120,100,100)

制作简易画布：

 <style>
        #cav{
            border:1px solid red;
        }
    </style>
  <!-- ★宽高必须写在元素的本身 -->
    <canvas id="cav" width="600" height="500"></canvas>
    <script>
        let cavDOM = document.getElementById('cav');
        let cavObj = cavDOM.getContext('2d');
        cavDOM.onmousedown = function(e){
            /* 事件源对象的兼容写法 */
            let event = e||window.event;
           
            /* 设置起始点 */
            cavObj.moveTo(event.clientX - cavDOM.offsetLeft,event.clientY-cavDOM.offsetTop);

            /* 一边移动一遍绘制路线 */
            cavDOM.onmousemove = function(e){
                let event = e||window.event;
                cavObj.lineTo(event.clientX - cavDOM.offsetLeft,event.clientY-cavDOM.offsetTop);
                cavObj.stroke();
            }
            /* 鼠标抬起的时候去除移动事件 */
            document.onmouseup = function(){
                cavDOM.onmousemove = null;
            }
        }
    </script>