相思资源网 Design By www.200059.com
利用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,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拖拽特效汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
js,canvas,鼠标拖拽
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无javascript利用canvas实现鼠标拖拽功能的评论...