javascript - HTML Canvas 绘图应用程序在不同的屏幕尺寸上中断

Question

这个绘图应用程序在我的笔记本电脑上完美运行。在不同屏幕尺寸上测试，绘制的线条与光标不对齐。我认为我必须应用一些扩展机制。

// DRAWING FUNCTIONALITY
var canvas, ctx, painting = false,
    previousMousePos;

  function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    }
  };
  // Sender drawing function.
  function drawLineImmed(x1, y1, x2, y2) {
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.strokeStyle = 'white';
    ctx.stroke();
  };
  // Receiver drawing function.
  function drawLineTwo(data) {
    ctx.beginPath();
    ctx.moveTo(data.px, data.py);
    ctx.lineTo(data.mx, data.my);
    ctx.strokeStyle = 'white';
    ctx.stroke();
  };
  // Get draw data. Pass to receiver drawing function.
  socket.on('draw', function(data) {
    drawLineTwo(data);
  });
  // Sender emit drawing data.
  function mouseMove(evt) {
    var mousePos = getMousePos(canvas, evt);
    if (painting) {
      drawLineImmed(previousMousePos.x, previousMousePos.y, mousePos.x, mousePos.y);
      socket.emit('draw', {px:previousMousePos.x, py:previousMousePos.y, mx:mousePos.x, my:mousePos.y}, page);
      previousMousePos = mousePos;
    };
  };
  function clicked(evt) {
    previousMousePos = getMousePos(canvas, evt);
    painting = true;
  };
  function release(evt) {
    painting = false;
  };
  function leave(evt) {
    painting = false;
  };
  $(document).ready(function() {
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    painting = false;
    canvas.addEventListener('mousemove', mouseMove, false);
    canvas.addEventListener('mousedown', clicked);
    canvas.addEventListener('mouseup', release);
    canvas.addEventListener('mouseleave', leave);
  });

//CSS

#canvas {
  border-radius: 2px;
  background-color: rgb(33,37,43);
  position: fixed;
  left: 1.7%;
  top: 3%;
  border-radius: 8px;
  border-style: solid;
  border-width: 3px;
  border-color: black;
  width: 80%;
}

什么必须相对于什么进行缩放？

Answer 1

Canvas 显示大小是通过样式属性设置的，与 Canvas 分辨率不同。您的代码没有显示您正在设置 Canvas 分辨率以匹配显示尺寸，这在您更改宽高比和尺寸时会导致问题。

当您获取 Canvas 时，还会获取边界框并设置其分辨率以匹配显示像素大小。

var rect = canvas.getBoundingClientRect();
canvas.width = rect.width;
canvas.height = rect.height;

有关详细信息，请参阅相关问题的答案 Fullscreen canvas