創(chuàng)建一個(gè)canvas
canvasDom.onmousedown =function(e){letevent =e||window.event;? ? ? ? ? ??
cavs.moveTo(event.clientX-canvasDom.offsetLeft,event.clientY-canvasDom.offsetTop);? ? ? ? ? ??
canvasDom.onmousemove=function(e){letevent=e||window.event;?
document.onmouseup=function(){? ?
cavs.lineTo(event.clientX-canvasDom.offsetLeft,event.clientY-canvasDom.offsetTop);? ? ????
}? ??}
cavs.stroke();? ? ? ? ? ??
canvasDom.onmousemove=null;? ? ? ? ? ? ? ?
一個(gè)直角三角形
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();復(fù)制代碼
canvas畫(huà)矩形
(先設(shè)置顏色再填充)
clearRect(x,y,width,height) 清除矩形內(nèi)的區(qū)域
cavs.fillStyle? ="red"cavs.fillRect(300,200,200,100)? ? ? ??
cavs.fillStyle? ="blue"cavs.lineWidth =10cavs.fillRect(320,220,100,50)? ? ? ??
cavs.closePath()