效果预览
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>mouse event</title>
</head>
<body>
<div>
<canvas
id="cs"
width="800"
height="400"
style="border: 2px solid green"
></canvas>
<button onclick="exportImg()">导出图片</button>
</div>
<script type="text/javascript">
let canvas = document.getElementById("cs");
let width = canvas.width;
let height = canvas.height;
let ctx = canvas.getContext("2d");
let now = { x: 0, y: 0 };
let pos = { x1: 0, y1: 0, x2: 0, y2: 0, x3: 0, y3: 0, x4: 0, y4: 0 };
let isDown = false;
let img = document.createElement("img");
img.src = "./a.jpeg";
img.style.position = "absolute";
img.width = "100";
img.height = "100";
img.onload = () => {
drawCanvas(img, "#FFFFFF");
updatePos(pos.x1, pos.y1);
};
canvas.onmousedown = (e) => {
isDown = true;
console.log("鼠标按下");
let x = e.pageX - canvas.offsetLeft;
let y = e.pageY - canvas.offsetTop;
now.x = x;
now.y = y;
console.log(x + " -> " + y);
if (!ctx.isPointInPath(x, y)) {
console.log("鼠标没在路径内");
return;
}
drawCanvas(img, "red");
};
canvas.onmousemove = (e) => {
if (!isDown) {
return;
}
let x = e.pageX;
let y = e.pageY;
console.log(x + " " + y);
if (!ctx.isPointInPath(x, y)) {
console.log("鼠标没在路径内");
return;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
pos.x1 = pos.x1 + (x - now.x);
pos.y1 = pos.y1 + (y - now.y);
updatePos(pos.x1, pos.y1);
judgePosition();
ctx.drawImage(img, pos.x1, pos.y1, img.width, img.height);
ctx.beginPath();
ctx.strokeStyle = "red";
ctx.rect(pos.x1, pos.y1, img.width, img.height);
ctx.stroke();
now.x = x;
now.y = y;
console.log("鼠标在移动..." + x + " --> " + y);
};
canvas.onmouseup = (e) => {
isDown = false;
console.log("鼠标松开");
drawCanvas(img, "#FFFFFF");
};
canvas.onmouseout = (e) => {
isDown = false;
console.log("鼠标离开了画布元素");
drawCanvas(img, "#FFFFFF");
judgePosition();
ctx.drawImage(img, pos.x1, pos.y1, img.width, img.height);
};
function drawCanvas(img, color) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, pos.x1, pos.y1, img.width, img.height);
ctx.beginPath();
ctx.strokeStyle = color;
ctx.rect(pos.x1, pos.y1, img.width, img.height);
ctx.stroke();
}
function updatePos(x, y) {
console.log("传入的参数值:", x, y);
pos.x1 = x;
pos.y1 = y;
pos.x2 = x + img.width;
pos.y2 = y;
pos.x3 = x + img.width;
pos.y3 = y + img.height;
pos.x4 = x;
pos.y4 = y + img.height;
}
function judgePosition() {
console.log("judgePosition:", pos);
if (pos.x1 < 0 && pos.y1 > 0) {
updatePos(0, pos.y1);
} else if (pos.x1 > 0 && pos.y1 < 0) {
updatePos(pos.x1, 0);
} else if (pos.x1 < 0 && pos.y1 < 0) {
updatePos(0, 0);
} else if (pos.x3 > width && pos.y3 < height) {
updatePos(width - img.width, pos.y3 - img.height);
} else if (pos.x3 < width && pos.y3 > height) {
updatePos(pos.x3 - img.width, height - img.height);
} else if (pos.x3 > width && pos.y3 > height) {
updatePos(width - img.width, height - img.height);
}
}
function exportImg() {
var dataURL = canvas.toDataURL("image/png");
downloadImage(dataURL, "canvas-image.png");
}
function downloadImage(dataURL, filename) {
var link = document.createElement("a");
link.download = filename;
link.href = dataURL;
link.click();
}
</script>
</body>
</html>
参考链接