Question

下面的代码正在工作，除了它似乎是在鼠标坐标下方约100px处绘制线条，有时当我刷新Chrome（或firefox）时，问题要么自行修复，要么根本不起作用！任何人都可以向我解释问题是什么吗？

谢谢！

function setXAndYOne (newX, newY) {
    x = newX;
    y = newY;
  }

  function setXAndYTwo (newX, newY) {
    x = x2;
    y = y2;
    x2 = newX;
    y2 = newY;
  }

  function drawingMouseDown (event) {
    setXAndYOne(event.pageX - offset.left, event.pageY - offset.top);
    isMousedown = true;
  }

  function drawingMouseMove (event) {
    setXAndYTwo(event.pageX - offset.left, event.pageY - offset.top);
    if (isMousedown) draw();
  }

  function drawingMouseUp (event) {
    isMousedown = false;
  }
  var ctx = drawingContext;

  function draw () {

    ctx.strokeStyle = currentColour;
    ctx.lineJoin = "round";
    ctx.lineWidth =  5/*strokeWidth*/;
    ctx.beginPath();
    ctx.moveTo(x,y);
    ctx.lineTo(x2, y2);
    ctx.stroke();
  }

Answer 1

预取画布边界框（边界框= =相对于页面的画布位置）。

var BB=canvas.getBoundingClientRect();
var BBoffsetX=BB.left;
var BBoffsetY=BB.top;

然后在你的鼠标处理程序中你可以获得这样的鼠标位置：

var mouseX=event.clientX-BBoffsetX;
var mouseY=event.clientY-BBoffsetY;

Javascript HTML5 Canvas绘制路径问题

1 个答案: