4.18

canvas设置画布

/* 获取canvas元素 */

let cavasDOM=document.getElementById('canvasId');

/* 创建canvas对象 */

 let cavs=cavasDOM.getContext('2d');

  let move=false;

    cavasDOM.onmousedown= function(e){
        let x = e.offsetX;
        let y = e.offsetY;
        cavs.moveTo(x,y);
        move = true
    }
    cavasDOM.onmousemove = function(e){
        let x = e.offsetX;
        let y = e.offsetY;
        if(move){
            cavs.lineTo(x,y);
            cavs.stroke();
        }
        cavasDOM.onmouseup = function(e){
            move=false
        }
        bth.onclick = function(){
            cavs.beginPath()
            cavs.clearRect(0,0,cavasDOM.width,cavasDOM.height)
        }
    }
    

创建和关闭路径

let cavasDOM = document.getElementsByClassName('cav')[0];
    let cav = cavasDOM.getContext('2d');

    /* 如果需要闭合路径，开始新的起点路径时，都需要 */
    /* 开始创建路径 */
    // cav.beginPath();
    // /* 关闭路径 */
    // cav.closePath();


    /* 这是一种写法，纯使用线来画三角形 */
    /* 这种会出现不圆滑的瑕疵 */
    // cav.moveTo(200,100);  /* 起始点 200距离左边的大小，100距离顶部的大小*/
    // cav.lineTo(100,250);  /* 从起始点画到第二个点 */
    // cav.lineTo(350,250);  /* 从第二个点画到第三个点 */
    // cav.lineTo(200,100);  /* 从第三个点画到第一个点 */


    /* 这种方式实现起来就比较原画，很润 */
    /* 开始绘制 */
    cav.beginPath();
    cav.moveTo(200,100);/* 第一个点的位置 */
    cav.lineTo(200,250);/* 第二个点的位置 */
    cav.lineTo(350,250);/* 第三个点的位置 */


    /* 关闭路径 */
    cav.closePath();

    /*  */
    cav.fillStyle = 'red';
    cav.fill();
    cav.strokeStyle = '#C95B7A';
    cav.lineWidth = '8'
    cav.stroke();