Canvas 上实现坐标定位
本文，我们将来讲解如何在 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 的性能更友好，这一步是在合成线程中进行，避免了重排的情况。
腾讯云开发者
