1.介绍
左键点击下移动开始画图。放开鼠标不在画图。
2.重要使用理论
query的使用：
鼠标的按下mousedown
鼠标的移动mousemove
鼠标的放开 mouseup
3.程序
1 <!DOCTYPE html> 2 <head> 3 <meta charset=utf-8" /> 4 <title>draw board</title> 5 <script src="D:jqueryjquery-1.12.4.min.js"></script> 6 <style type="text/css"> 7 #board{border:2px solid:#f00;} 8 </style> 9 </head> 10 <body> 11 <canvas id="board" width="300" height="300"></canvas> 12 <br/> 13 <script type="text/javascript"> 14 var canvas=document.getElementById('board'); 15 var board=canvas.getContext("2d"); 16 board.lineWidth=5; 17 board.strokeStyle="blue"; 18 var paint=false; 19 20 //mousedown 21 $("#board").mousedown(function(e){ 22 var mouseX=e.pageX-this.offsetLeft; 23 var mouseY=e.pageY-this.offsetTop; 24 paint=true; //true 25 board.moveTo(mouseX,mouseY); 26 }); 27 28 //mouseup 29 $("#board").mouseup(function(e){ 30 paint=false; 31 }); 32 33 //mousemove 34 $("#board").mousemove(function(e){ 35 var mouseX=e.pageX-this.offsetLeft; 36 var mouseY=e.pageY-this.offsetTop; 37 if(paint){ 38 board.lineTo(mouseX,mouseY); 39 board.stroke(); 40 } 41 }); 42 43 44 </script> 45 <h2>哈哈哈哈</h2> 46 </body> 47 </html>
4.运行结果图
