HTML Canvas绘制位置偏移及透明橡皮擦实现问题求助

问题1：鼠标位置与Canvas绘制位置不匹配 #

原因 #

Canvas存在两个独立的尺寸设置：

• HTML属性的width/height：这是Canvas绘图缓冲区的实际像素尺寸，决定了绘图的精度和坐标范围
• CSS设置的width/height：仅控制Canvas在页面上的显示尺寸

你只通过CSS定义了显示尺寸，但未同步调整绘图缓冲区的尺寸，导致基于显示尺寸的鼠标坐标和基于缓冲区的绘图坐标不匹配。

解决步骤 #

1. 监听窗口大小变化，实时同步Canvas的width/height属性与显示尺寸
2. 计算缩放比例，将鼠标的显示坐标转换为绘图缓冲区的实际坐标

修改后的核心代码

const mainCanvas = document.getElementById("modal-canvas");
const context = mainCanvas.getContext("2d");

let initialX;
let initialY;
let pencilColor = "#000";
let brushSize = 10;
let isErasing = false;

// 同步Canvas缓冲区与显示尺寸
function resizeCanvas() {
  const rect = mainCanvas.getBoundingClientRect();
  mainCanvas.width = rect.width;
  mainCanvas.height = rect.height;
  context.lineCap = "round";
  context.lineJoin = "round";
}

// 转换鼠标坐标到Canvas缓冲区
function getCanvasCoordinates(evt) {
  const rect = mainCanvas.getBoundingClientRect();
  const scaleX = mainCanvas.width / rect.width;
  const scaleY = mainCanvas.height / rect.height;
  return {
    x: evt.offsetX * scaleX,
    y: evt.offsetY * scaleY
  };
}

// 修改绘图函数，适配坐标转换
const dibujar = (cursorX, cursorY) => {
  context.beginPath();
  context.moveTo(initialX, initialY);
  context.lineWidth = brushSize;
  
  if (isErasing) {
    context.globalCompositeOperation = 'destination-out';
  } else {
    context.globalCompositeOperation = 'source-over';
    context.strokeStyle = pencilColor;
  }
  
  context.lineCap = "round";
  context.lineJoin = "round";
  context.lineTo(cursorX, cursorY);
  context.stroke();

  initialX = cursorX;
  initialY = cursorY;
};

// 更新鼠标事件处理，使用转换后的坐标
const mouseDown = (evt) => {
  const coords = getCanvasCoordinates(evt);
  initialX = coords.x;
  initialY = coords.y;
  dibujar(initialX, initialY);
  mainCanvas.addEventListener("mousemove", mouseMoving);
};

const mouseMoving = (evt) => {
  const coords = getCanvasCoordinates(evt);
  dibujar(coords.x, coords.y);
};

// 初始化与监听
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
mainCanvas.addEventListener("mousedown", mouseDown);
mainCanvas.addEventListener("mouseup", mouseUp);

问题2：实现透明擦除效果 #

原因 #

用白色填充只是覆盖画布内容，并非真正的擦除。Canvas的globalCompositeOperation属性可以控制绘图合成模式，destination-out模式会清除画布对应区域的像素，实现透明擦除效果。

解决步骤 #

1. 新增isErasing变量标记当前模式
2. 单独设置橡皮擦切换函数，区分铅笔模式
3. 导出图片时需先绘制白色背景，避免透明区域导出为黑色

修改后的HTML与辅助函数

<div id="canvas-container">
  <canvas id="modal-canvas" class="canvas"></canvas>
    <div id="canvas-options">
      <div>
        <button onclick="setPencilColor('black')">Pencil</button>
        <button onclick="setEraser()">Eraser</button>
        <span id="brush-sice"><input type="range" min="1" max="10" value="3" oninput="setBrushSize(event.target.value)"></input></span>
      </div>
    <div>
      <button onclick="saveImage()">Save</button>
     </div>
   </div>
</div>

// 区分铅笔与橡皮擦模式
const setPencilColor = (color) => {
  pencilColor = color;
  isErasing = false;
};

const setEraser = () => {
  isErasing = true;
};

// 修复导出图片的透明区域问题
const saveImage = () => {
  const tempCanvas = document.createElement('canvas');
  tempCanvas.width = mainCanvas.width;
  tempCanvas.height = mainCanvas.height;
  const tempCtx = tempCanvas.getContext('2d');
  
  // 先绘制白色背景
  tempCtx.fillStyle = '#ffffff';
  tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
  // 再绘制原Canvas内容
  tempCtx.drawImage(mainCanvas, 0, 0);
  
  const link = document.createElement("a");
  link.href = tempCanvas.toDataURL();
  link.download = "image.jpg";
  link.click();
};

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