利用canvas实现鼠标拖拽功能，当在元素上按下鼠标并移动时，元素跟着鼠标移动。
效果：
主要思路：
当鼠标按下时，用isPointInPath方法判断鼠标位置是否在元素上，如果在则鼠标移动时元素跟着移动；当鼠标抬起时，将鼠标移动事件和抬起事件置空。
代码如下：
<canvas 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,0,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,0,can.width,can.height); createBlock(ax,ay); }; //鼠标移开事件 can.onmouseup = function(){ can.onmousemove = null; can.onmouseup = null; }; }; }</script>
更多精彩文章请点击专题： Javascript拖拽特效汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持乐呵呵网。
