实现画板画笔功能，效果如下：

 

　　1 <div>

 

　　2     <!--画板-->

 

　　3     <canvas id="box1" height="400" width="400" style="background-color: antiquewhite"></canvas>

 

　　4     <!--保存并显示鼠标X轴位置-->

 

　　5     <label id="lab_X"></label>

 

　　6     <!--保存并显示鼠标Y轴位置-->

 

　　7     <label id="lab_Y"></label>

 

　　8 </div>

 

　　1 $（function （） {

 

　　2             var canvas = document.getElementById（"box1"）;

 

　　3             if （canvas == null）

 

　　4                 return false;

 

　　5             var context = canvas.getContext（"2d"）;

 

　　6             //标记开始书写

 

　　7             var start = false;

 

　　8             $（canvas）。mousemove（function （event） {

 

　　9                 //显示当前鼠标位置

 

　　10                 $（"#lab_X"）。text（event.pageX）;

 

　　11                 $（"#lab_Y"）。text（event.pageY）;

 

　　12                 if （start） {

 

　　13                     context.lineTo（event.pageX, event.pageY）;

 

　　14                     context.stroke（）;

 

　　15                 }

 

　　16             }）;

 

　　17             //鼠标按下，开始书写

 

　　18             $（canvas）。mousedown（function （） {

 

　　19                 context.beginPath（）;

 

　　20                 context.moveTo（$（"#lab_X"）。text（）， $（"#lab_Y"）。text（））;

 

　　21                 start = true;

 

　　22             }）;

 

　　23             //鼠标抬起，结束书写

 

　　24             $（canvas）。mouseup（function （） {

 

　　25

 

　　26                 start = false;

 

　　27                 context.closePath（）;

 

　　28             }）;

 

　　29         }）;