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)
