javascript利用canvas實現(xiàn)鼠標(biāo)拖拽功能
更新時間：2020年07月23日 15:22:17 作者：騎著代碼去流浪
這篇文章主要為大家詳細(xì)介紹了javascript利用canvas實現(xiàn)鼠標(biāo)拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
利用canvas實現(xiàn)鼠標(biāo)拖拽功能，當(dāng)在元素上按下鼠標(biāo)并移動時，元素跟著鼠標(biāo)移動。
效果：
主要思路：
當(dāng)鼠標(biāo)按下時，用isPointInPath方法判斷鼠標(biāo)位置是否在元素上，如果在則鼠標(biāo)移動時元素跟著移動；當(dāng)鼠標(biāo)抬起時，將鼠標(biāo)移動事件和抬起事件置空。
代碼如下：
<canvas id="can" width="400" height="400"></canvas>
<script type="text/javascript">
var can = document.getElementById("can");
var ctx = can.getContext("2d");
//創(chuàng)建圓滑塊
function createBlock(a,b){
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(a,b,30,0,Math.PI*2);
ctx.fill();
}
//鼠標(biāo)按下，將鼠標(biāo)按下坐標(biāo)保存在x,y中
createBlock(50,50);
can.onmousedown = function(ev){
var e = ev||event;
var x = e.clientX;
var y = e.clientY;
drag(x,y);
};
//拖拽函數(shù)
function drag(x,y){
// 按下鼠標(biāo)判斷鼠標(biāo)位置是否在圓上，當(dāng)畫布上有多個路徑時，isPointInPath只能判斷最后那一個繪制的路徑
if(ctx.isPointInPath(x,y)){
//路徑正確，鼠標(biāo)移動事件
can.onmousemove = function(ev){
var e = ev||event;
var ax = e.clientX;
var ay = e.clientY;
//鼠標(biāo)移動每一幀都清楚畫布內(nèi)容，然后重新畫圓
ctx.clearRect(0,0,can.width,can.height);
createBlock(ax,ay);
};
//鼠標(biāo)移開事件
can.onmouseup = function(){
can.onmousemove = null;
can.onmouseup = null;
};
};
}
</script>
更多精彩文章請點擊專題： Javascript拖拽特效匯總
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript是用來在數(shù)據(jù)被傳輸?shù)椒?wù)前對html表單中輸入的數(shù)據(jù)進(jìn)行驗證，使用javascript對用戶輸入的信息進(jìn)行驗證是項目必須的，下面小編給大家整理一些比較常用的javascript表單驗證，需要的朋友可以參考下2015-08-08
uniapp開發(fā)App出現(xiàn)網(wǎng)絡(luò)異常的解決方法
這篇文章主要給大家介紹了uniapp開發(fā)App出現(xiàn)網(wǎng)絡(luò)異常的解決方案,文中有相關(guān)的解決方法和步驟,具有一定的參考價值,需要的朋友可以參考下2023-09-09
使用正則替換變量...2007-05-05
原生js實現(xiàn)復(fù)制對象、擴展對象 類似jquery中的extend()方法
jq的extend()方法能很方便的實現(xiàn)擴展對象方法，這里要實現(xiàn)的是：原生js實現(xiàn)復(fù)制對象，擴展對象，類似jq中的extend()方法,需要的朋友可以參考下2014-08-08
本篇文章主要介紹了JS數(shù)組交集、并集、差集的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
JS前端開發(fā)判斷是否是手機端并跳轉(zhuǎn)操作（小結(jié)）
這篇文章主要介紹了JS前端開發(fā)判斷是否是手機端并跳轉(zhuǎn)操作,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
這篇文章主要介紹了JS如何獲取URL中的Query參數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
微信開發(fā) JS-SDK 6.0.2 經(jīng)常遇到問題總結(jié)
本篇文章主要介紹了"微信微信JS-SDK 6.0.2 遇到問題 "，主要涉及到微信微信JS-SDK 6.0.2 填坑筆記 方面的內(nèi)容，對于微信微信JS-SDK 6.0.2 填坑筆記 感興趣的同學(xué)可以參考一下。2016-12-12
js實現(xiàn)點擊復(fù)制當(dāng)前文本到剪貼板功能（兼容所有瀏覽器）
這篇文章主要介紹了js實現(xiàn)點擊復(fù)制當(dāng)前文本到剪貼板功能，兼容所有瀏覽器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-12-12
微信小程序MoxB實現(xiàn)全局狀態(tài)管理流程詳解
這篇文章主要介紹了微信小程序使用MoxB實現(xiàn)全局狀態(tài)管理方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-11-11