首页 > 代码库 > 实现鼠标拖动canvas绘制的图片
实现鼠标拖动canvas绘制的图片
不啰嗦上代码：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title></head><body><canvas id="gameCanvas" width="500px" height="300px"></canvas><script>var cvs = document.getElementById(‘gameCanvas‘);var ctx = cvs.getContext(‘2d‘);//绘制黑色背景ctx.fillStyle = ‘black‘;ctx.fillRect(0, 0, 500,300);//绘制红色矩形ctx.fillStyle = ‘red‘;ctx.fillRect(100, 100, 100,100);//记录矩形的位置var posX = 100;var posY = 100; cvs.onmousedown = function(e){ var x = e.clientX - posX; var y = e.clientY - posY; //判断鼠标是否点击在矩形内 if(e.clientX >= posX + this.offsetLeft && e.clientX <= posX + 100 + this.offsetLeft && e.clientY >= posY + this.offsetTop && e.clientY <= posY + 100 + this.offsetTop){ document.onmousemove = function(e){ //ctx.clearRect(posX, posY, 100,100); //鼠标拖动时重绘黑色背景 ctx.fillStyle = ‘black‘; ctx.fillRect(0, 0, 500,300); //鼠标拖动时重绘红色矩形 ctx.fillStyle = ‘red‘; ctx.fillRect(e.clientX-x, e.clientY-y, 100,100); //记录矩形的位置 posX = e.clientX-x; posY = e.clientY-y; }; document.onmouseup = function(){ document.onmousemove = null; }; }};</script></body></html>
实现鼠标拖动canvas绘制的图片
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。