为什么这个JavaScript画布绘图应用程序落后？_Javascript_Html_Html5 Canvas

为什么这个JavaScript画布绘图应用程序落后？

javascript html html5-canvas

为什么这个JavaScript画布绘图应用程序落后？,javascript,html,html5-canvas,Javascript,Html,Html5 Canvas,我正在用JavaScript制作一个HTML绘图应用程序，这是我的一个教程。我已经在“演示颜色”部分的末尾，也就是“添加尺寸”部分之前说到了要点我已经为自己制作了这个应用程序，但经过合理的绘图量后，这个应用程序开始滞后。笔在鼠标后面开始延迟，但最重要的是，当颜色改变时，笔的颜色实际改变需要相当长的时间按下按钮时，我正在呼叫控制台.log，告诉我按下了哪个按钮。当按下按钮时，这些颜色会立即出现，但颜色仍需要一段时间才能改变代码如下： <html> <head>&l

我正在用JavaScript制作一个HTML绘图应用程序，这是我的一个教程。我已经在“演示颜色”部分的末尾，也就是“添加尺寸”部分之前说到了要点

我已经为自己制作了这个应用程序，但经过合理的绘图量后，这个应用程序开始滞后。笔在鼠标后面开始延迟，但最重要的是，当颜色改变时，笔的颜色实际改变需要相当长的时间

按下按钮时，我正在呼叫控制台.log，告诉我按下了哪个按钮。当按下按钮时，这些颜色会立即出现，但颜色仍需要一段时间才能改变

代码如下：

<html>
  <head></head>
<body>
  <canvas id="lessonCanvas" width="800" height="500" style="border:1px solid black;"></canvas>
  <button id="colorPurple">Purple</button>
  <button id="colorGreen">Green</button>
  <button id="colorYellow">Yellow</button>
  <button id="colorBrown">Brown</button>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    //canvas drawing
    context = document.getElementById('lessonCanvas').getContext("2d");
    $('#lessonCanvas').mousedown(function(e){
      var mouseX = e.pageX - this.offsetLeft;
      var mouseY = e.pageY - this.offsetTop;

      paint = true;
      addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
      redraw();
    });
    $('#lessonCanvas').mousemove(function(e){
      if(paint){
        addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
        redraw();
      }
    });
    $('#lessonCanvas').mouseup(function(e){
      paint = false;
    });
    $('#lessonCanvas').mouseleave(function(e){
      paint = false;
    });

    var clickX = new Array();
    var clickY = new Array();
    var clickDrag = new Array();
    var clickSize = new Array();
    var curSize = "normal";
    var clickTool = new Array();
    var curTool = "crayon";
    var paint;

    function addClick(x, y, dragging) {
      clickX.push(x);
      clickY.push(y);
      clickDrag.push(dragging);
      if(curTool == "eraser"){
        clickColor.push("white");
      }else{
        clickColor.push(curColor);
      }
      clickColor.push(curColor);
      clickSize.push(curSize);
    }

    function redraw() {
      context.lineJoin = "round";
      /* context.lineWidth = 5; */
      for(var i=0; i < clickX.length; i++) {        
        context.beginPath();
        if(clickDrag[i] && i) {
          context.moveTo(clickX[i-1], clickY[i-1]);
        } else {
          context.moveTo(clickX[i]-1, clickY[i]);
        }
        context.lineTo(clickX[i], clickY[i]);
        context.closePath();
        context.strokeStyle = clickColor[i];
        context.lineWidth = curSize;
        context.stroke();
      }
    }

    var colorPurple = "#cb3594";
    var colorGreen = "#659b41";
    var colorYellow = "#ffcf33";
    var colorBrown = "#986928";

    var curColor = colorPurple;
    var clickColor = new Array();

    document.getElementById("colorPurple").onclick = function() {
      curColor = colorPurple;
      console.log("Color changed to purple.");
    }
    document.getElementById("colorGreen").onclick = function() {
      curColor = colorGreen;
      console.log("Color changed to green.");
    }
    document.getElementById("colorYellow").onclick = function() {
      curColor = colorYellow;
      console.log("Color changed to yellow.");
    }
    document.getElementById("colorBrown").onclick = function() {
      curColor = colorBrown;
      console.log("Color changed to brown.");
    }
  </script>
</body>
</html>


紫色
绿色
黄色的
棕色的
//帆布画
context=document.getElementById（'lessonCanvas'）.getContext（“2d”）；
$（'#lessonCanvas'）.mousedown（函数（e）{
var mouseX=e.pageX-this.offsetLeft；
var mouseY=e.pageY-this.offsetTop；
油漆=真；
addClick（e.pageX-this.offsetLeft，e.pageY-this.offsetTop）；
重画（）；
});
$（'#lessonCanvas'）.mousemove（函数（e）{
如果（油漆）{
addClick（e.pageX-this.offsetLeft，e.pageY-this.offsetTop，true）；
重画（）；
}
});
$（'#lessonCanvas'）.mouseup（函数（e）{
油漆=假；
});
$（'lessonCanvas'）.mouseleave（函数（e）{
油漆=假；
});
var clickX=新数组（）；
var clickY=新数组（）；
var clickDrag=新数组（）；
var clickSize=新数组（）；
var curSize=“正常”；
var clickTool=新数组（）；
var curTool=“蜡笔”；
var涂料；
功能添加单击（x、y、拖动）{
点击x，推送（x）；
clickY.push（y）；
单击拖动。推送（拖动）；
如果（curTool==“橡皮擦”）{
点击颜色。按下（“白色”）；
}否则{
单击颜色。推送（curColor）；
}
单击颜色。推送（curColor）；
单击大小。推送（光标）；
}
函数重画（）{
context.lineJoin=“round”；
/*context.lineWidth=5*/
对于（var i=0；i


在上有一个演示，它使用完全相同的代码，但由于某些原因没有延迟。这是因为我的画布更大，还是我没有注意到其他问题？任何帮助都将不胜感激
 它没有滞后。你犯了一个错误
在下面的addClick
中查看一下，您将添加两次相同的颜色，这就是为什么会出现这种行为
我做了一些改动，请阅读addClick



var colorpulse=“#cb3594”；
var colorGreen=“#659b41”；
var colorYellow=“#ffcf33”；
var colorBrown=“#986928”；
var curColor=颜色紫色；
var clickColor=新数组（）；
//帆布画
context=document.getElementById（'lessonCanvas'）.getContext（“2d”）；
$（'#lessonCanvas'）.mousedown（函数（e）{
var mouseX=e.pageX-this.offsetLeft；
var mouseY=e.pageY-this.offsetTop；
油漆=真；
addClick（e.pageX-this.offsetLeft，e.pageY-this.offsetTop）；
重画（）；
});
$（'#lessonCanvas'）.mousemove（函数（e）{
如果（油漆）{
addClick（e.pageX-this.offsetLeft，e.pageY-this.offsetTop，true）；
重画（）；
}
});
$（'#lessonCanvas'）.mouseup（函数（e）{
油漆=假；
});
$（'lessonCanvas'）.mouseleave（函数（e）{
油漆=假；
});
var clickX=新数组（）；
var clickY=新数组（）；
var clickDrag=新数组（）；
var clickSize=新数组（）；
var curSize=“正常”；
var clickTool=新数组（）；
var curTool=“蜡笔”；
var涂料；
功能添加单击（x、y、拖动）{
点击x，推送（x）；
clickY.push（y）；
单击拖动。推送（拖动）；
如果（curTool==“橡皮擦”）{
点击颜色。按下（“白色”）；
}否则{
单击颜色。推送（curColor）；
}
//clickColor.push（curColor）；//应删除此选项
单击大小。推送（光标）；
}
函数重画（）{
context.lineJoin=“round”；
/*context.lineWidth=5*/
对于（var i=0；ifunction redraw() {
  context.lineJoin = "round";
  /* context.lineWidth = 5; */
  for(var i=0; i < clickX.length; i++) {        
    context.beginPath();
    if(clickDrag[i] && i) {
      context.moveTo(clickX[i-1], clickY[i-1]);
    } else {
      context.moveTo(clickX[i]-1, clickY[i]);
    }
    context.lineTo(clickX[i], clickY[i]);
    context.closePath();
    context.strokeStyle = clickColor[i];
    context.lineWidth = curSize;
    context.stroke();
  }
}

saveX;
saveY;
function redraw(x, y){
    ctx.beginPath();
    ctx.moveTo(saveX, saveY);
    ctx.lineTo(x, y);
    ctx.closePath();
    ctx.strokeStyle = selectedColor;
    ctx.lineJoin = 'round';
    ctx.lineWidth = curSize;
    ctx.stroke();
    saveX = x;
    saveY = y;
}