HTML5制作简单画板 复制代码代码如下: ">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 /> var draw=canvas.getContext("2d");<br /> draw.lineWidth=5; //线条粗细<br /> draw.strokeStyle="red"; //颜色<br /> var godraw=false; <br /> <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> })<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> })<br /> <br /> })<br /> 效果图
