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

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

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

按下按钮时，我正在呼叫console.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>

此页面上有一个演示，它使用完全相同的代码，但由于某种原因不会滞后。这是因为我的画布更大，还是有我没有注意到的其他问题？任何帮助将不胜感激！

它没有滞后。你做错了。

看看下面addClick 在那里你添加相同的颜色两次，这就是你得到这种行为的原因。

我做了微小的改变，阅读了addClick的评论

   
    var colorPurple = "#cb3594";
    var colorGreen = "#659b41";
    var colorYellow = "#ffcf33";
    var colorBrown = "#986928";
    var curColor = colorPurple;
    var clickColor = new Array();
   
   //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);//This should be removed
      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();
      }
    }
    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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="lessonCanvas" width="200" height="200" 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>

我也遇到了这个滞后。我按照这里的教程进行操作。搜索解决方案后，我找到了本教程。经过比较，之所以滞后，就是因为这个循环。

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();
  }
}

保存在数组中的值不会重置，并且每次发生鼠标移动事件时始终循环。要解决此问题，请删除addClick()，不要将其保存在数组中，而只需保存最后的x，y和颜色。您还应该在鼠标按下时保存最后一个 x 和 y 事件。下面是一个示例。

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;
}

相关内容

最新更新

热门标签：