Html5 Canvas 画笔一例

浏览数：31 / 时间：2015年06月09日

<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 onMouseMove( event ){
         event.preventDefault();
         if( isDown ){
             var x =event.clientX , y = event.clientY;
             d( x, y );
         }
     };

     function onMouseUp( 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>