亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

javascript利用canvas實(shí)現(xiàn)鼠標(biāo)拖拽功能

 更新時(shí)間：2020年07月23日 15:22:17   作者：騎著代碼去流浪  
這篇文章主要為大家詳細(xì)介紹了javascript利用canvas實(shí)現(xiàn)鼠標(biāo)拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

利用canvas實(shí)現(xiàn)鼠標(biāo)拖拽功能，當(dāng)在元素上按下鼠標(biāo)并移動時(shí)，元素跟著鼠標(biāo)移動。

效果：

主要思路：

當(dāng)鼠標(biāo)按下時(shí)，用isPointInPath方法判斷鼠標(biāo)位置是否在元素上，如果在則鼠標(biāo)移動時(shí)元素跟著移動；當(dāng)鼠標(biāo)抬起時(shí)，將鼠標(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)畫布上有多個路徑時(shí)，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>

更多精彩文章請點(diǎn)擊專題： Javascript拖拽特效匯總

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論