Javascript HTML5 Canvas 绘制路径问题

Javascript HTML5 Canvas draw path issue

本文关键字：路径 问题 绘制 Canvas HTML5 Javascript      更新时间：2023-09-26

下面的代码正在工作，但它似乎在鼠标坐标下方绘制了大约 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();
  }

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

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

然后在鼠标处理程序中，您可以像这样获得鼠标位置：

var mouseX=event.clientX-BBoffsetX;
var mouseY=event.clientY-BBoffsetY;
相关文章：