Question

我有一个HTML画布，当我在浏览器窗口处于我的标准尺寸时绘制它时它工作正常但是当你开始缩放窗口（即缩小它）时，画布上的绘图没有t出现在它意味着的地方。

var mousePressed = false;

var canvas = document.getElementById("canvas");
var lastX;
var lastY;
var colour = "black";
var size = 3;


function clear1() {
  var context = canvas.getContext("2d");
  context.clearRect(0, 0, canvas.width, canvas.height);
}


canvas.addEventListener("mousedown", (function(e) {
  var xpos = e.pageX - this.offsetLeft;
  var ypos = e.pageY - this.offsetTop;

  mousePressed = true;

  draw(xpos, ypos, false);
}));

canvas.addEventListener("mouseup", (function(e) {
  mousePressed = false;
}));

canvas.addEventListener("mousemove", (function(e) {
  var xpos = e.pageX - this.offsetLeft;
  var ypos = e.pageY - this.offsetTop;

  if (mousePressed) {
    draw(xpos, ypos, true);
  }

}));



function draw(x, y, isDown) {
  if (isDown) {
    context = canvas.getContext("2d");
    context.beginPath();
    context.strokeStyle = colour;
    context.lineWidth = size;
    context.lineJoin = "round";
    context.moveTo(lastX, lastY);
    context.lineTo(x, y);
    context.closePath();
    context.stroke();
  }
  lastX = x;
  lastY = y;

}

#canvas {
  border: 2px solid black;
  background-color: white;
  margin: auto;
  display: block;
  width: 200px;
  height: 100px;
}

<canvas id="canvas" width="200" height="100">

</canvas>

<button onclick="clear1()" type="Submit1">Clear</button>

<input name="Submit" id="submitButton" type="submit" onclick="sendPayment()" value="Send Payment">

Answer 1

来自Kaiido's comment：

不要通过CSS设置画布宽度/高度，直接使用它自己的宽度和高度属性

JavaScript画布绘制错误的坐标

1 个答案: