如何在滚动时继续绘制 canvas？

Question

我想实现 canvas 作为我网站的背景，这样用户就可以使用他们的光标在网页上绘画，就像这样的代码笔：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 属性。

其余的更改在代码段中进行了评论。

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>

如何在滚动时继续绘制 canvas？

How to keep drawing on canvas when scrolling?

javascript

canvas

html5-canvas