Question

我有这个简单的代码，用于在画布上用鼠标绘图。但是如果我尝试设置画布的样式，比如改变宽度或居中，绘制的指针和线就会分开。我该如何解决这个问题？

JavaScript的：

var el = document.getElementById('canvas');
var ctx = el.getContext('2d');
var isDrawing;

el.onmousedown = function(e) {
  isDrawing = true;
  ctx.moveTo(e.clientX, e.clientY);
};
el.onmousemove = function(e) {
  if (isDrawing) {
    ctx.lineTo(e.clientX, e.clientY);
    ctx.stroke();
  }
};
el.onmouseup = function() {
  isDrawing = false;
};

HTML：

CSS：

canvas { 
    border: 2px solid #ccc;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 800px;
}

这里是Fiddle

Answer 1

从不使用css设置画布的宽度/高度。这真是一个坏主意。始终使用画布的原生宽度/高度属性。

此外，您可能应该使用e.offsetX和e.offsetY来获取鼠标的x和y坐标。

这是working fiddle

CSS / JavaScript：样式画布时的问题（用于鼠标绘图）

1 个答案: