canvas

canvas元素

letcanvasDOM =document.getElementById('box');letcav = canvasDOM.getContext('2d');复制代码

绘制线段

// 线段，两点一线// 设置起点cav.moveTo(150,100);// 设置终点cav.lineTo(300,100);// 设置线段颜色cav.strokeStyle ='skyblue';// 设置线段宽度cav.lineWidth ='8'// 绘制线段cav.stroke()复制代码

通过stroke方法构建画板

canvasDOM.onmousedown =function(event){letevent = e ||window.eventvarx = event.clientX -this.offsetLeft -parseInt(this.style.borderLeftWidth)vary = event.clientY -this.offsetTop -parseInt(this.style.borderTopWidth)    cav.moveTo(x, y);    canvasDOM.onmousemove =function(event){varx2 = event.clientX -this.offsetLeft -parseInt(this.style.borderLeftWidth)vary2 = event.clientY -this.offsetTop -parseInt(this.style.borderTopWidth)        cavs.lineTo(x2, y2)        cav.stroke()    }    canvasDOM.onmouseup =function(event){        canvasDOM.onmousemove =null}}复制代码

绘制路径

cav.beginPath();cav.moveTo(200,100);cav.lineTo(200,200);cav.lineTo(300,200);cav.closePath();cav.strokeStyle ='skyblue';cav.lineWidth ='5';cav.fillStyle ='pink';cav.fill()cav.stroke()复制代码

绘制矩形

cav.fillStyle ='skyblue'// 绘制填充矩形// fillRect(x,y,width,height)cav.fillRect(100,100,300,200)cav.strokeStyle ='pink'cav.lineWidth =8// 绘制矩形边框cav.strokeRect(100,100,300,200)// clearRect 在给定的矩形内清除指定的像素cav.clearRect(125,125,100,100)