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显示大小是通过样式属性设置的，与画布分辨率不同。您的代码未显示您正在设置画布分辨率以匹配显示大小，这将在您更改宽高比和大小时导致问题。

当你获得画布时，也会获得边界框并设置其分辨率以匹配显示像素大小。

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

有关详情，请参阅相关问题的答案Fullscreen canvas

Answer 2

正如Blindman67所指出的，画布有2种尺寸。用于定义画布中的像素数（canvas.width＆amp; canvas.height）的大小以及由CSS设置的画布大小。

我调整大小的正常方式就是这样

function resizeCanvasToMatchDisplaySize(canvas) {

  // look up the size the canvas is displayed
  var desiredWidth = canvas.clientWidth;
  var desiredHeight = canvas.clientHeight;

  // if the number of pixels in the canvas doesn't match
  // update the canvas's content size.
  if (canvas.width != desiredWidth || canvas.height != desiredHeight) {
    canvas.width = desiredWidth;
    canvas.height = desiredHeight;
  }
}

然后我在绘图之前调用它（例如可以在mouseMove中）。这样，只有在尺寸发生变化时才会清除画布。

你也可以使用canvas.getBoundingClientRect()和it is technically more correct但它也会产生垃圾，这对我来说通常很糟糕。对你而言，我怀疑它不重要。

无论何时设置/更改画布的大小，都会重置它的所有内容并将其清除。这意味着当您更改大小时，fillStyle，lineWidth等其他设置都会重置为默认值。如果你想要一些可以持续调整大小的东西，你需要以某种方式记录它。想法包括跟踪到目前为止绘制的所有内容并在调整大小后再次绘制它。另一个想法是使用类似

之类的东西将当前画布复制到另一个屏幕外画布

 // make a new canvas if we haven't already
 offscreenCanvas = offscreenCanvas || document.createElement("canvas");

 // make the offscreen canvas match the size of the onscreen canvas
 offscreenCanvas.width = onscreenCanvas.width;
 offscreenCanvas.height = onscreenCanvas.height;

 // get a context for a offscreen canvas
 offscreenCanvasContext = offscreenCanvas.getContext("2d");

 // clear it just in case it's old and the size didn't change.
 offscreenCanvasContext.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);

 // copy the onscreen canvas to the offscreen canvas
 offscreenCanvasContext.drawImage(onscreenCanvas, 0, 0);

 // resize the onscreen canvas
 reiszeCanvasToMatchDisplaySize(onscreenCanvas);

 // copy back the old content
 onscreenCanvasContext.drawImage(offscreenCanvas, 0, 0);

 // free the memory used by the offscreen canvas
 offscreenCanvas.width = 0;
 offscreenCanvas.height = 0;

当然，如果旧的画布尺寸较大，您将最终剪辑内容。

此外，如果您的画布的drawingBuffer尺寸（像素数）与显示尺寸you can do the math to make the mouse position still match

不匹配

HTML画布绘图应用程序在不同的屏幕尺寸上中断

2 个答案: