HTML5 Canvas绘图板鼠标位置偏移问题求助

嘿，我太懂你遇到的这个糟心问题了——Canvas上画出来的位置总跟鼠标对不上，这大概率是没把鼠标的视口坐标正确转换成Canvas的内部像素坐标，再加上可能的Canvas渲染拉伸问题，偏移就找上门了。我来一步步帮你搞定：

为什么会出现位置偏差？ #

核心原因有两个：

• Canvas的width和height属性是它的实际像素尺寸，但如果通过Bootstrap这类CSS框架给Canvas设置了不一样的渲染尺寸，画布会被拉伸，直接导致坐标映射错位。
• 鼠标事件返回的clientX/clientY是相对于浏览器视口的坐标，不是Canvas自身的像素坐标，必须做转换才能对齐。

正确获取鼠标在Canvas上的位置 #

首先得写一个可靠的getMousePos函数，专门用来把鼠标事件坐标转换成Canvas内部的正确位置：

function getMousePos(canvas, evt) {
  // 获取Canvas在页面上的位置和渲染尺寸
  const rect = canvas.getBoundingClientRect();
  // 计算相对Canvas的坐标，同时自动修正CSS拉伸带来的比例问题
  return {
    x: (evt.clientX - rect.left) * (canvas.width / rect.width),
    y: (evt.clientY - rect.top) * (canvas.height / rect.height)
  };
}

这个函数会自动适配Canvas被CSS拉伸的情况——哪怕你的Canvas属性是900x500，但CSS渲染成了其他尺寸，它也能通过比例计算把鼠标坐标映射到正确的像素点上。

修正你的铅笔工具代码 #

你的现有代码还有几个小bug：比如pos只在函数初始化时获取了一次，mousemove时没更新坐标；事件参数e也没正确传递；isDrawing变量也得提前声明。修正后的代码如下：

// 先声明外层变量
let isDrawing = false;
const el = document.getElementById('c');
const ctx = el.getContext('2d');

function pencil() {
  el.onmousedown = function(e) {
    isDrawing = true;
    const pos = getMousePos(el, e);
    ctx.moveTo(pos.x, pos.y);
  };

  el.onmousemove = function(e) {
    if (isDrawing) {
      const pos = getMousePos(el, e);
      ctx.lineTo(pos.x, pos.y);
      ctx.stroke();
    }
  };

  el.onmouseup = function() {
    isDrawing = false;
  };

  // 别忘了加mouseleave事件，防止鼠标移出Canvas后还在瞎画
  el.onmouseleave = function() {
    isDrawing = false;
  };
}

// 初始化铅笔工具
pencil();

额外优化小提示 #

如果要支持Retina这类高DPI屏幕，让绘图更清晰，可以加上设备像素比的修正：

const dpr = window.devicePixelRatio || 1;
// 把Canvas实际像素放大dpr倍
el.width = 900 * dpr;
el.height = 500 * dpr;
ctx.scale(dpr, dpr);
// 然后给Canvas设置CSS尺寸为原大小
el.style.width = '900px';
el.style.height = '500px';

这样处理后，之前的getMousePos函数依然能正常工作，因为它是基于CSS渲染尺寸计算比例的。

内容的提问来源于stack exchange，提问作者wendykr