如何使用跨度标记附加速度控制Javascript onmousemove，因此每个附加跨度标记都没有空间答案

【问题标题】：How to control Javascript onmousemove with span tag append speed so no space each append span tag如何使用跨度标记附加速度控制Javascript onmousemove，因此每个附加跨度标记都没有空间
【发布时间】：2020-05-16 12:05:17
【问题描述】：

我正在尝试 onmousemove 事件 js，但我有一些问题我没有解决，需要清除解决方案。

我已经制作了 onmousemove 事件，但我需要控制这个速度有多远。我需要每个跨度附加标签应该像普通绘图一样相互粘住，跨度附加标签之间不需要任何空格。请在下面查看我的 sn-p 以获得我想要的清晰想法。

document.onmousemove = doMove;



  function doMove(e){
  let body = document.querySelector('body');
  let span = document.createElement('span');
  let x = e.clientX;
  let y = e.clientY;
  body.appendChild(span);
  span.style.left = x + 'px';
  span.style.top = y + 'px';
}

span{
  width: 15px;
  height: 15px;
  position: absolute;
  background: red;
  transition: .1s;
}

【问题讨论】：

你真的应该使用画布
这个答案可能会有所帮助：stackoverflow.com/a/5259071/3930247。我还建议使用画布。
请给出这个解决方案，

标签： javascript

【解决方案1】：

正如this answer 所说，您无法控制 mousemove 事件的频率——这取决于您使用的浏览器和设备。

我建议使用画布。可以在此处找到一种解决方案：https://codepen.io/zsolt555/pen/rpPXOB。

// ...
const stopDrawing = () => { isMouseDown = false; }
const startDrawing = event => {
    isMouseDown = true;   
   [x, y] = [event.offsetX, event.offsetY];  
}
const drawLine = event => {
    if ( isMouseDown ) {
        const newX = event.offsetX;
        const newY = event.offsetY;
        context.beginPath();
        context.moveTo( x, y );
        context.lineTo( newX, newY );
        context.stroke();
        //[x, y] = [newX, newY];
        x = newX;
        y = newY;
    }
}

paintCanvas.addEventListener( 'mousedown', startDrawing );
paintCanvas.addEventListener( 'mousemove', drawLine );
paintCanvas.addEventListener( 'mouseup', stopDrawing );
paintCanvas.addEventListener( 'mouseout', stopDrawing );

【讨论】：