HTML5製作簡單畫板 複製程式碼程式碼如下： 程式碼如下：程式碼如下：> HTML>> ">http:// ajax.googleapis.com/ajax/libs/jquery /1.7.1/jquery.min.js">>canvas{ border:2pxsolid #000;} style> <br /> $ (document).ready(function(){<br /> var canvas=document.getElementById("draw");<br /> var draw=canvas.getContext("2d");<br /> draw.lineWidth=5; / / 線粗<br /> draw.tripStyle="red"; // 顏色<br /> var godraw=false; 🎜> <br /> //滑鼠滑鼠<br /> $("#draw").mousedown(function(ee ){<br /> //精準座標<br /> var mouseX=e.pageX-this.offsetLeft;<br /> var mouseYe.pageY-this.offsetTop;<br /> draw.moveTouseY); 🎜> 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.lines();<br />} <p> })<br /> <br /> })<br />
