HTML5制作简单画板 复制代代码如下: < ;script src="http:// ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">><br>canvas{ border:2px Solid #000;}<br> <br> $(document).ready(function(){<br> var Canvas=document.getElementById("draw");<br> vardraw=canvas.getContext("2d");<br>draw.lineWidth=5; //線条粗细<br>draw.strokingStyle="red"; //颜色<br> var godraw=false; 🎜> <br> //按下鼠标<br> $("#draw").mousedown(function(e){<br> //標準确坐标<br> varmouseX=e.pageX-this.offsetLeft;<br> var MouseY=e.pageY-this.offsetTop;<br>draw.moveTo(mouseX,mouseY);<br> godraw=true;</p> <p> })<br> //放开ネズミ标<br> $("#draw").mouseup(function(e){<br> godraw=false;<br> })<br> //移動ネズミ标<br> $("#draw").mousemove(function(e){<br> if(godraw){<br> varmouseX=e.pageX-this.offsetLeft;<br> varmouseY=e.pageY-this.offsetTop ;<br>draw.lineTo(mouseX 4,mouseY 4);<br>draw.ストローク();<br> }</p> <p> })<br> <br> })<br> 效果图