HTML5制作简单画板 复制代码代码如下: < ;skrip src="http:// ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">><br>kanvas{ border:2px solid #000;}<br> <br> $(document).ready(function(){<br> var canvas=document.getElementById("draw");<br> var draw=canvas.getContext("2d");<br> draw.lineWidth=5; //线条粗细<br> draw.strokeStyle="red"; //颜色<br> var godraw=false; 🎜> <br> //按下鼠标<br> $("#draw").mousedown(function(e){<br> //准确坐标<br> var mouseX=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> var mouseX=e.pageX-this.offsetLeft;<br> var mouseY=e.pageY-this.offsetTop ;<br> draw.lineTo(mouseX 4,mouseY 4);<br> draw.stroke();<br> }</p> <p> })<br> <br> })<br>
