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

        /* 创建canvas对象 */

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

绘制一条线

        /* (距离左边，距离顶部) */

        /* 起始点 *//* 终点 */

        /* cavs.moveTo(60,20)

        cavs.lineTo(20,100)

        cavs.strokeStyle='pink';

        cavs.lineWidth='10';

        cavs.stroke(); */

签名板

 canvasDom.onmousedown = function (e) {

            var event = e || window.event;

            cavs.moveTo(event.clientX - canvasDom.offsetLeft, event.clientY - canvasDom.offsetTop)

            canvasDom.onmousemove = function (e) {

                var event = e || window.event;

                cavs.lineTo(event.clientX - canvasDom.offsetLeft, event.clientY - canvasDom.offsetTop);

                cavs.strokeStyle = 'pink';

                cavs.lineWidth = '10';

                cavs.stroke();

            }

            document.onmouseup=function(e){

                canvasDom.onmousemove=null

            }

        }

开始绘制--三角形

        cav.beginPath();

        /* 三个点的坐标 */

        cav.moveTo(200, 100);

        cav.lineTo(100, 200);

        cav.lineTo(300, 200);

        cav.closePath();

绘制--矩形

        cav.rect(100,100,300,200)

        cav.fillStyle = 'yellow';       填充颜色

        cav.fill();

        cav.strokeStyle = 'pink';    边框颜色

        cav.lineWidth = '10';         边框宽度

        cav.stroke()

填充矩形

        cav.fillStyle='pink'

        cav.fillRect(100,100,300,200);

矩形边框

        cav.strokeStyle='yellow';

        cav.lineWidth='20';

        cav.strokeRect(100,100,300,200);

消除矩形

        cav.clearRect(150,150,100,100)