Canvascanvas是HTML5的canvas元素使用JavaScript在网页上绘制图像画布是一个矩形区域，可以

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

canvas写牛字


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

    </script>
</body>

创建一个画布

canvasDom.onmousedown =function(e){
            let event =e||window.event;
            cavs.moveTo(event.clientX-canvasDom.offsetLeft,event.clientY-canvasDom.offsetTop);

            canvasDom.onmousemove=function(e){
                let event=e||window.event;
                cavs.lineTo(event.clientX-canvasDom.offsetLeft,event.clientY-canvasDom.offsetTop);
                cavs.stroke();
            }
            document.onmouseup=function(){
                canvasDom.onmousemove=null;
            }
        }

一个直角三角形

  cavs.beginPath();
        cavs.moveTo(100,100)
        cavs.lineTo(100,250)
        cavs.lineTo(350,250)
        cavs.closePath()
        cavs.fillStyle = "red"
        cavs.fill();
        cavs.storkeStyle = "blue"
        cavs.lineWidth =  "8"
        cavs.stroke();

canvas画矩形（先设置颜色再填充）clearRect(x,y,width,height) 清除矩形内的区域

cavs.fillStyle  = "red"
        cavs.fillRect(300,200,200,100)

        cavs.fillStyle  = "blue"
        cavs.lineWidth = 10
        cavs.fillRect(320,220,100,50)
        cavs.closePath()