画布绘制多行而不是一行javascript

所以我希望用户能够画一条线，我希望它像这样

但我也希望他画多条分开的线，所以我删除了这条线：

    ctx.clearRect(0, 0, canvas.width, canvas.height);

但当我这么做的时候，我得到了这个

这是我的密码：

//画布
const canvas=document.getElementById（“canvas”）；
const ctx=canvas.getContext（“2d”）；
//便秘
//const canvasx=$（canvas.offset（）.left；
//const canvasy=$（canvas.offset（）.top；
让canvasx=canvas.offsetLeft；
让canvasy=canvas.offsetTop；
设last_mousex=（last_mousey=0）；
设mousex=（mousey=0）；
让mousedown=false；
//穆斯敦
canvas.addEventListener（“鼠标向下”，函数（e）{
last_mousex=parseInt（e.clientX-canvasx）；
last_mousey=parseInt（例如clientY-canvasy）；
mousedown=true；
});
//鼠标
canvas.addEventListener（“mouseup”，函数（e）{
mousedown=false；
});
//鼠标移动
canvas.addEventListener（“mousemove”，函数（e）{
mousex=parseInt（e.clientX-canvasx）；
mousey=parseInt（例如clientY-canvasy）；
如果（鼠标向下）{
//clearRect（0，0，canvas.width，canvas.height）；
ctx.beginPath（）；
ctx.moveTo（最后一个鼠标，最后一个鼠标）；
ctx.lineTo（mousex，mousey）；
ctx.strokeStyle=“黑色”；
ctx.线宽=10；
ctx.lineJoin=ctx.lineCap=“圆形”；
ctx.stroke（）；
}
//输出
document.querySelector（“输出”）.innerHTML=
“当前：”+
摩丝+
", " +
老鼠+
“
最后一个：”+
最后的慕斯+
", " +
最后的老鼠+
“
鼠标向下：”+
穆斯敦；
});
如果我正确理解您的要求，这是因为您仅在用户按下时才设置last_mousex和last_mousey

您不会在它们每次移动时都更新它，因此当它们单击“原点”时会锁定到该位置。然后在连续绘制中永不更新

要解决这个问题，只需从这里移动最后一个鼠标

//Mousedown
canvas.addEventListener("mousedown", function (e) {
  last_mousex = parseInt(e.clientX - canvasx); // remove this 
  last_mousey = parseInt(e.clientY - canvasy); // and this
  mousedown = true;
});

要在渲染线的位置之后添加，请执行以下操作：

canvas.addEventListener("mousemove", function (e) {
  mousex = parseInt(e.clientX - canvasx);
  mousey = parseInt(e.clientY - canvasy);
  if (mousedown) {
    // ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.moveTo(last_mousex, last_mousey);
    ctx.lineTo(mousex, mousey);
    ctx.strokeStyle = "black";
    ctx.lineWidth = 10;
    ctx.lineJoin = ctx.lineCap = "round";
    ctx.stroke();
  }

  //right here! 
  last_mousex = parseInt(e.clientX - canvasx);
  last_mousey = parseInt(e.clientY - canvasy);

让mousex=（mousey=0）
声明一个变量，
mousex
。另一个符号，
mousey
，将是一个隐式全局变量。你需要
让mousex=0，mousey=0@Pointy我在代码中更改了它，但当我绘制任何东西时都没有更改。它实际上起作用了！但现在当我画的时候，我得到了一条弯曲的线，但我想要的是一条直线，我不确定是什么原因造成的。代码中不可能有弯曲的线条。。。也许检查一下你的鼠标？我只是想确定。。您的画布的宽度和高度与css对齐，对吗？在css中，我有
画布{cursor:crosshair；border:1px solid 35; 000000；}
和html
好的，所以这里是您可以做的，我不能复制这个问题。但是，如果您想创建一个任何人都可以在其上绘制的画布，那么无论如何添加一个“更平滑”的函数可能是值得的。我现在没有太多时间，但是只有当当前位置和上一个位置之间的距离大于“平均”缓冲区（比如10或更多）时，才能绘制一个简单的补丁来修复抖动。因此，仅当线条长度大于10像素时绘制。这样你就不会因为硬件的原因而在生产线上产生微小的振动。