javaScript canvas实现(画笔大小颜色橡皮的实例)

2023-09-20 09:47:07 150

shape rectangle circle line

varshap=99;//0iscircle;1isrectangle varorignalX,orignalY;//thecoordinateofmousedown varlastX,lastY;//thecoordinateoflastmouseposition varisMouseDown=false;//flagofmousepressingdown varmyCanvas=document.getElementById("myCanvas"); varcontext=myCanvas.getContext('2d'); varwidth=myCanvas.width,height=myCanvas.height; vardata;//storinglastcanvas'content context.strokeStyle="black"; context.strokeWidth=1; context.lineWidth=1; document.getElementById('color').onchange=function(){ context.strokeStyle=this.value }; functiondoEraser(){ context.strokeStyle="white"; shap=2; } functionsizeChange(){ context.lineWidth=parseInt(document.getElementById('size').value); } functionshapeChange(){ context.strokeStyle="black"; varmyselect=document.getElementById("shape"); varindex=myselect.selectedIndex; varmyvalue=myselect.options[index].value; varmytext=myselect.options[index].text; shap=parseInt(myvalue); } functionmyCanvasMouseDown(event){ //event.preventDefault(); if(event.button==0){ orignalX=event.offsetX; orignalY=event.offsetY; context.moveTo(orignalX,orignalY); data=context.getImageData(0,0,width,height); isMouseDown=true; } } functionmyCanvasMouseMove(event){ if(isMouseDown){ //event.preventDefault(); switch(shap){ case0: context.clearRect(0,0,width,height); context.putImageData(data,0,0); lastX=event.offsetX; lastY=event.offsetY; context.beginPath(); context.arc(orignalX+(lastX-orignalX)/2,orignalY+(lastY-orignalY)/2,Math.abs(lastX-orignalX)/2,0,Math.PI*2,true); context.stroke(); context.closePath(); break; case1: context.clearRect(0,0,width,height); context.putImageData(data,0,0); lastX=event.offsetX; lastY=event.offsetY; context.strokeRect(orignalX,orignalY,lastX-orignalX,lastY-orignalY); break; case2: lastX=event.offsetX; lastY=event.offsetY; context.lineTo(lastX,lastY);//根据鼠标路径绘画 context.stroke();//立即渲染 break; } } } functionmyCanvasMouseUp(event){ if(isMouseDown){ //event.preventDefault(); context.clearRect(0,0,width,height); context.putImageData(data,0,0); lastX=event.offsetX; lastY=event.offsetY; switch(shap){ case0: context.beginPath(); context.arc(orignalX+(lastX-orignalX)/2,orignalY+(lastY-orignalY)/2,Math.abs(lastX-orignalX)/2,0,Math.PI*2,true); context.stroke(); context.closePath(); break; case1: context.beginPath(); context.strokeRect(orignalX,orignalY,lastX-orignalX,lastY-orignalY); context.closePath(); break; case2: context.lineTo(lastX,lastY);//根据鼠标路径绘画 context.stroke();//立即渲染 break; } isMouseDown=false; lastX=null; lastY=null; orignalX=null; orignalY=null; data=context.getImageData(0,0,width,height); context.beginPath(); context.clearRect(0,0,width,height); context.putImageData(data,0,0); context.closePath(); } } myCanvas.addEventListener("mousedown",myCanvasMouseDown,false); myCanvas.addEventListener("mousemove",myCanvasMouseMove,false); myCanvas.addEventListener("mouseup",myCanvasMouseUp,false);

javaScript canvas实现(画笔大小 颜色 橡皮的实例)

热门推荐

随机推荐

javaScript canvas实现(画笔大小颜色橡皮的实例)