创建一个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;
一个直角三角形
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();复制代码
canvas画矩形
(先设置颜色再填充)
clearRect(x,y,width,height) 清除矩形内的区域
cavs.fillStyle ="red"cavs.fillRect(300,200,200,100)
cavs.fillStyle ="blue"cavs.lineWidth =10cavs.fillRect(320,220,100,50)
cavs.closePath()