javascript - HTML 画布线条被画成 gittery

Question

我的 HTML 画布有问题。当我快速移动这条线时，它会以一种乱七八糟的方式绘制，我可以看到多条线。我不知道这是否是帧速率和我的眼睛的问题，或者我做错了什么......这是我的代码：

const can = document.getElementById('can');
const ctx = can.getContext('2d');

can.width = innerWidth;
can.height = innerHeight;

function triangle(x1, y1, x2, y2){
    ctx.strokeStyle = "blue";
    ctx.lineWidth = "2";
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(x2, y2);
    ctx.lineTo(x2, y2 + (y1 - y2));
    ctx.strokeStyle = "#33cc33";
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(x2, y2 + (y1 - y2));
    ctx.lineTo(x1, y1);
    ctx.strokeStyle = "red";
    ctx.stroke();
}

addEventListener('mousemove', (e)=>{
    ctx.clearRect(0, 0, can.width, can.height);
    triangle(can.width / 2, can.height / 2, e.clientX, e.clientY);
}); 

<canvas id="can"></canvas>

提前致谢！

PS：如果问题已经在其他地方回答了，我真的很抱歉，我搜索了一下，找不到它......

标签： javascripthtml5-canvas