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

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

我想将画布作为我网站的背景，这样用户就可以使用他们的光标在网页上绘画，就像这样的代码笔：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); }

问题是当我滚动时光标停止绘制，直到我再次移动鼠标。知道如何在滚动时保持光标绘画吗？

提前致谢！非常感谢！

解决方法

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

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

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

其余的更改在代码段中进行了注释。

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,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>