Question

我一直在尝试使用HTML 5画布创建一个小型绘图应用程序。但是有一个问题，就是我束手无策。

当我在画布上使用mousemove事件时，它会按预期工作（在鼠标位置绘制），但是如果您将鼠标移出/移入画布中的速度非常快，它将不会在画布的边框上画一条线画布，但在出门的地方停下来。进入画布的方式相同，它只会在画布中的某处开始。这是因为mousemove事件不够快，如果移动得太快，它将跳过鼠标位置。

我该如何解决？希望任何人都可以帮助：）

这是我的代码：

HTML：

<canvas height="600px" width="600px" style="border: 1px solid #000;" id="game"></canvas>

Javascript：

let canvas = $("#game");
let ctx = canvas[0].getContext("2d");

let drawings = [];
let paint = false;

$(document).mouseup(function(e) {
    paint = false;

  drawings = [];
})

canvas.mousedown(function(e) {
    let drawPoint = [];
    paint = true;

  drawPoint.push(e.pageX - this.offsetLeft);
  drawPoint.push(e.pageY - this.offsetTop);
})

canvas.mousemove(function(e){
    if(!paint)
    return;

    let drawPoint = [];

  drawPoint.push(e.pageX - this.offsetLeft);
  drawPoint.push(e.pageY - this.offsetTop);

    drawings.push(drawPoint);

  draw();
})

function draw() {
    for(let i in drawings) {

    i = parseInt(i);

    let lastX = drawings[i][0];
    let lastY = drawings[i][1];

    let currentX = drawings[i+1][0];
    let currentY = drawings[i+1][1];

    ctx.beginPath();
    ctx.moveTo(lastX,lastY);
    ctx.lineTo(currentX, currentY);
    ctx.strokeStyle = ctx.fillStyle = "#000";
    ctx.lineJoin = ctx.lineCap = "round";
    ctx.lineWidth = 5;
    ctx.closePath();
    ctx.stroke();

    drawings.shift();
  }
}

这是一个演示的jsfiddle： https://jsfiddle.net/hscnd3yz/78/

HTML 5 Canvas，javascript mousemove事件不够快

0 个答案: