javascript利用canvas实现鼠标拖拽功能
骑着代码去流浪 人气:0本文着重为大家仔细讲解了javascript利用canvas实现鼠标拖拽功能，文中代码实例讲解的非常细致，希望能够帮助到您，欢迎大家阅读和收藏
利用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>
加载全部内容