HTML Canvas游标错位：如何解决游标位置与绘制位置不一致的问题？

javascript

2024-03-04 17:06:40

HTML Canvas 中的游标错位：问题与解决方案

引言

HTML Canvas 是一种强大的工具，用于创建交互式图形和动画。然而，当使用画布绘制时，有时游标位置与实际绘制位置不一致，导致绘制的线条与预期的位置偏差。这种问题称为游标错位，它可能是由于多种原因造成的，包括缩放问题和视差。

原因

缩放问题：

当设备像素比 (DPR) 大于 1 时，设备物理像素与 CSS 像素之间的比率就会不一致。这会导致画布元素在渲染时进行缩放，从而导致游标位置错位。

视差：

有时，画布元素可能相对于视口偏移，从而导致游标位置不准确。这在移动设备或具有滚动功能的页面上尤其常见。

解决方案

解决缩放问题

检查设备像素比： 使用 window.devicePixelRatio 检查设备像素比。
设置 Canvas 尺寸为物理像素尺寸： 将 Canvas 的 width 和 height 属性设置为物理像素尺寸，使用 window.devicePixelRatio 乘以 Canvas 的 CSS 尺寸。

解决视差问题

计算画布偏移量： 使用 getBoundingClientRect() 方法计算画布元素的偏移量。
在事件处理程序中应用偏移量： 在 mousedown、mousemove 和 mouseup 事件处理程序中，从游标位置中减去偏移量，以计算相对于画布的实际游标位置。

完整解决方案

将上述解决方案结合起来，完整的代码如下：

const canvas = document.getElementById('myCanvas');

// 设置 Canvas 尺寸为物理像素尺寸
canvas.width = canvas.clientWidth * window.devicePixelRatio;
canvas.height = canvas.clientHeight * window.devicePixelRatio;

// 计算画布偏移量
const canvasRect = canvas.getBoundingClientRect();
const offsetX = canvasRect.left;
const offsetY = canvasRect.top;

// 事件处理程序
canvas.onmousedown = function (e) {
    // 从游标位置中减去偏移量
    lastPoint = {
        x: e.clientX - offsetX,
        y: e.clientY - offsetY
    };
    isDrawing = true;
};

canvas.onmousemove = function (e) {
    if (!isDrawing) return;

    // 从游标位置中减去偏移量
    currentPoint = {
        x: e.clientX - offsetX,
        y: e.clientY - offsetY
    };
    // ... 其余代码
};