实现鼠标拖动canvas绘制的图片
Posted codeing or artist ?
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现鼠标拖动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绘制的图片的主要内容，如果未能解决你的问题，请参考以下文章
canvas里有一张图，怎么实现鼠标可以拖动该图片移动，放大缩小旋转
HTML5 Canvas元素绘制地图，已绘制出地图，并且地图可放大缩小，怎样实现鼠标移动到一幢楼时显示楼的名称