详解如何在Canvas上实现坐标定位
作者：Jimmy
本文，我们将来讲解如何在 canvas 上实现坐标的定位，如下效果图所示：
我们顺便还显示了一个拖拽的功能，当然这个并不是使用 canvas 绘制，后面会讲到。
我们设定 HTML 的代码如下：
<!-- 画布 --> <canvas id="canvas"></canvas> <!-- 拖拽的元素 --> <div id="move-content">（0， 0）</div>
我们添加点样式润色下：
html, body {
width: 100%;
height: 100%;
position: relative;
}
* {
padding: 0;
margin: 0;
}
#canvas {
width: 100%;
height: 100%;
margin: 0 auto;
}
#move-content {
position: absolute;
border: 1px solid red;
padding: 12px;
z-index: 999;
top: 0;
left: 0;
}上面，我们设定了画布的宽高继承父元素，均为100%。
下面是重点⚠️
绘制线条
线条的绘制很简单，我们直接调用函数：
ctx.moveTo(beginPointX, beginPointY); ctx.lineTo(endPointX, endPointY)；
重点是，我们应该怎么获取到开始点和结束的点呢？
Yeah！ 我们获取到鼠标当前相对的原点位置，那不就行了。
let canvasDom = document.getElementById("canvas");
canvasDom.width = canvasDom.parentNode.clientWidth;
canvasDom.height = canvasDom.parentNode.clientHeight;
let ctx = canvasDom.getContext("2d");
ctx.strokeStyle = "red";
ctx.lineWidth = 1;
ctx.font = "14px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";首先，我们获取画布元素并设定画布的宽和高。并且设置画笔 ctx 的粗细，颜色。绘制字体的大小，字体等。
接下来，我们监听鼠标的移动事件并绘制坐标：
let draggableElement = document.getElementById("move-content");
canvasDom.addEventListener("mousemove", (event) => {
clearRect();
let react = canvasDom.getBoundingClientRect();
let x = event.clientX - react.left;
let y = event.clientY - react.top;
// 绘制十字架
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(canvasDom.width, y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, canvasDom.height);
ctx.stroke();
// 绘制文本
ctx.fillText(`(${x}, ${y})`, x, y);
draggableElement.innerText = `(${x}, ${y})`
})
// 清空画布
canvasDom.addEventListener("mouseout", () => {
clearRect();
})
getBoundingClientRect() 是 DOM 元素对象的方法，用于获取该元素相对于视口的位置和尺寸信息。
该方法返回一个 DOMRect 对象，其中包含以下属性： x: 元素左边界相对于视口左边界的距离
y: 元素上边界相对于视口上边界的距离
width: 元素的宽度
height: 元素的高度
top: 元素上边界相对于视口上边界的距离
right: 元素右边界相对于视口左边界的距离
bottom: 元素下边界相对于视口上边界的距离
left: 元素左边界相对于视口左边界的距离
我们来讲个题外话，怎么实现 DIV 的拖拽。
实现拖拽动效
实现元素的拖拽，我们只需要监听 mousedown，mousemove 和 mouseup 事件即可：
let draggableElement = document.getElementById("move-content");
let isDragging = false;
let offset = { x: 0, y: 0 };
draggableElement.addEventListener("mousedown", function(event) {
isDragging = true;
// 计算鼠标相对于元素的偏移量
let rect = draggableElement.getBoundingClientRect();
offset.x = event.clientX - rect.left;
offset.y = event.clientY - rect.top;
});
document.addEventListener('mousemove', function(event) {
if (!isDragging) return;
// 阻止默认事件，避免拖拽过程中选中文本等问题
event.preventDefault();
// 计算元素应该移动到的位置
var x = event.clientX - offset.x;
var y = event.clientY - offset.y;
// 应用新的位置到元素
draggableElement.style.transform = `translate(${x}px, ${y}px)`;
});
document.addEventListener('mouseup', function() {
isDragging = false;
});上面的代码一目了然，需要注意的是，我们应用新的位置到元素的时候，使用的样式是 draggableElement.style.transform，调用的是属性 transform，而不是 top, left 等相对定位。是因为 transform 的性能更友好，这一步是在合成线程中进行，避免了重排的情况。
到此这篇关于详解如何在Canvas上实现坐标定位的文章就介绍到这了,更多相关Canvas实现坐标定位内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！