滚动时如何在画布上继续绘图？

Question

我想实现画布作为我网站的背景，以便用户可以使用光标在网页上绘画，就像这个 codepen：https://codepen.io/cocotx/pen/PoGRdxQ?editors=1010 （这是来自http://www.dgp.toronto.edu/~clwen/test/canvas-paint-tutorial/的示例代码）

if(window.addEventListener) {
window.addEventListener('load', function () {
  var canvas, context;

  // Initialization sequence.
  function init () {
    // Find the canvas element.
    canvas = document.getElementById('imageView');
    if (!canvas) {
      alert('Error: I cannot find the canvas element!');
      return;
    }

    if (!canvas.getContext) {
      alert('Error: no canvas.getContext!');
      return;
    }

    // Get the 2D canvas context.
    context = canvas.getContext('2d');
    if (!context) {
      alert('Error: failed to getContext!');
      return;
    }

    // Attach the mousemove event handler.
    canvas.addEventListener('mousemove', ev_mousemove, false);
  }

  // The mousemove event handler.
  var started = false;
  function ev_mousemove (ev) {
    var x, y;

    // Get the mouse position relative to the canvas element.
    if (ev.layerX || ev.layerX == 0) { // Firefox
      x = ev.layerX;
      y = ev.layerY;
    } else if (ev.offsetX || ev.offsetX == 0) { // Opera
      x = ev.offsetX;
      y = ev.offsetY;
    }

    // The event handler works like a drawing pencil which tracks the mouse 
    // movements. We start drawing a path made up of lines.
    if (!started) {
      context.beginPath();
      context.moveTo(x, y);
      started = true;
    } else {
      context.lineTo(x, y);
      context.stroke();
    }
  }

  init();
}, false); }

问题是当我滚动时光标停止绘画，直到我再次移动鼠标。关于如何在滚动时保持光标绘制的任何想法？

提前致谢！非常感谢！

Answer 1

您必须存储最后一个鼠标事件并在滚动事件中触发一个新的假。

幸运的是，MouseEvent constructor 接受一个 mouseEventInit 对象，我们可以在该对象上设置新事件的 clientX 和 clientY 值，因此我们只需要存储之前的这些值事件并在 scroll 事件中调度它。

现在，我忍不住用您的代码重写了几乎所有内容。
它对旧浏览器进行了大量检查（比如非常旧的浏览器，无论如何都不应该再次面对网络），如果你愿意，你可能想再次添加它。
它并没有清除上下文，这意味着每次它画一条新线时，它也确实在自身上重新画了之前的线，导致线条更粗，开头有很多噪音，结尾更流畅。
这可以通过多种方式解决，干扰较小的一种是在每一帧清除上下文。 为了获得相对鼠标位置，它现在使用事件的 clientX 和 clientY 属性。

其余的更改在 sn-p 中注释。

window.addEventListener('load', function () {
  const canvas = document.getElementById('imageView');
  context = canvas.getContext("2d");
  let last_event; // we will store our mouseevents here
  
  // we now listen to the mousemove event on the document,
  // not only on the canvas
  document.addEventListener('mousemove', ev_mousemove);
  document.addEventListener('scroll', fireLastMouseEvent, { capture: true } );
  // to get the initial position of the cursor
  // even if the mouse never moves
  // we listen to a single mouseenter event on the document's root element
  // unfortunately this seems to not work in Chrome
  document.documentElement.addEventListener( "mouseenter", ev_mousemove, { once: true } );

  // called in scroll event
  function fireLastMouseEvent() {
    if( last_event ) {
      // fire a new event on the document using the same clientX and clientY values
      document.dispatchEvent( new MouseEvent( "mousemove", last_event ) );
    }
  }
  
  // mousemove event handler.
  function ev_mousemove (ev) {
    const previous_evt = last_event || {};
    const was_offscreen = previous_evt.offscreen;
    
    // only for "true" mouse event
    if( ev.isTrusted ) {
      // store the clientX and clientY props in an object
      const { clientX, clientY } = ev;
      last_event = { clientX, clientY };
    }
    
    // get the relative x and y positions from the mouse event
    const point = getRelativePointFromEvent( ev, canvas );
    
    // check if we are out of the canvas viewPort
    if( point.x < 0 || point.y < 0 || point.x > canvas.width || point.y > canvas.height ) {
      // remember we were
      last_event.offscreen = true;
      // if we were already, don't draw
      if( was_offscreen ) { return; }
    }
    // we come from out-of-screen to in-screen
    else if( was_offscreen ) { 
      // move to the previous point recorded as out-of-screen
      const previous_point = getRelativePointFromEvent( previous_evt, canvas );
      context.moveTo( previous_point.x, previous_point.y );
    }
    
    // add the new point to the context's sub-path definition
    context.lineTo( point.x, point.y );

    // clear the previous drawings
    context.clearRect( 0, 0, canvas.width, canvas.height );
    // draw everything again
    context.stroke();

  }

  function getRelativePointFromEvent( ev, elem ) {
    // first find the bounding rect of the element
    const bbox = elem.getBoundingClientRect();
    // subtract the bounding rect from the client coords
    const x = ev.clientX - bbox.left;
    const y = ev.clientY - bbox.top;

    return { x, y };
  }
});

#container {
  width: 400px;
  height: 200px;
  overflow: auto;
  border: 1px solid;
}
#imageView { border: 1px solid #000; }
canvas {
  margin: 100px;
}

<div id="container">
  <canvas id="imageView" width="400" height="300"></canvas>
</div>