javascript利用canvas實現滑鼠拖拽功能
阿新 • • 發佈:2020-07-24
利用canvas實現滑鼠拖拽功能,當在元素上按下滑鼠並移動時,元素跟著滑鼠移動。
效果:
主要思路:
當滑鼠按下時,用isPointInPath方法判斷滑鼠位置是否在元素上,如果在則滑鼠移動時元素跟著移動;當滑鼠抬起時,將滑鼠移動事件和抬起事件置空。
程式碼如下:
<canvas id="can" width="400" height="400"></canvas> <script type="text/javascript"> var can = document.getElementById("can"); var ctx = can.getContext("2d"); //建立圓滑塊 function createBlock(a,b){ ctx.beginPath(); ctx.fillStyle = "red"; ctx.arc(a,b,30,Math.PI*2); ctx.fill(); } //滑鼠按下,將滑鼠按下座標儲存在x,y中 createBlock(50,50); can.onmousedown = function(ev){ var e = ev||event; var x = e.clientX; var y = e.clientY; drag(x,y); }; //拖拽函式 function drag(x,y){ // 按下滑鼠判斷滑鼠位置是否在圓上,當畫布上有多個路徑時,isPointInPath只能判斷最後那一個繪製的路徑 if(ctx.isPointInPath(x,y)){ //路徑正確,滑鼠移動事件 can.onmousemove = function(ev){ var e = ev||event; var ax = e.clientX; var ay = e.clientY; //滑鼠移動每一幀都清楚畫布內容,然後重新畫圓 ctx.clearRect(0,can.width,can.height); createBlock(ax,ay); }; //滑鼠移開事件 can.onmouseup = function(){ can.onmousemove = null; can.onmouseup = null; }; }; } </script>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。