首页 > 代码库 > Html5 Canvas 画笔一例
Html5 Canvas 画笔一例
<html> <head> </head> <body> <div> <canvas id="_canvas" width = "1900" height="1000" ></canvas> </div> <script type="text/javascript"> var ctx = document.getElementById("_canvas").getContext("2d"); var lastPosition = null; var c = "#ADFF2F"; var w = 5 ; var isDown = false; function d( x , y ){ ctx.beginPath(); ctx.strokeStyle = c ; ctx.fillStyle = c ; ctx.arc(x , y , w /2 , 0 , Math.PI * 2 ); ctx.fill(); ctx.beginPath(); ctx.lineWidth = w ; ctx.lineCap = ctx.lineJoin = "round"; if( lastPosition ){ ctx.moveTo( lastPosition.x , lastPosition.y); ctx.lineTo( x , y ); ctx.stroke(); } lastPosition = {"x" : x , "y" : y }; }; function onMousDown( event ){ event.preventDefault(); var x = event.clientX; var y = event.clientY; isDown = true; d( x , y ); }; function onm ouseMove( event ){ event.preventDefault(); if( isDown ){ var x =event.clientX , y = event.clientY; d( x, y ); } }; function onm ouseUp( event ){ event.preventDefault(); if(isDown){ isDown = false; lastPosition = null; } }; var canvas = document.getElementById("_canvas"); canvas.addEventListener("mousedown",onMousDown,false); canvas.addEventListener("mousemove",onMouseMove,false); canvas.addEventListener("mouseup",onMouseUp,false); </script> </body></html>
Html5 Canvas 画笔一例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。