javascript - HTML5 Canvas - 绘制的线条瞬间消失

Question

我有两张画布一层一层地叠在一起。

<div class="center">
  <canvas id="imgcanvas" style="position:absolute;margin:0 0 0 0;z-index:1"></canvas>
  <canvas id="drawcanvas" style="position:absolute;margin:0 0 0 0;z-index:2"></canvas>
</div>

在画布下方，我有一个水平缩略图调色板。单击缩略图后，单击的图像将呈现在图像画布中。我正在使用drawcanvas在画布上绘制线条。绘制线条的坐标存储在 localStorage 中。

单击缩略图以及加载图像后，我试图绘制从 localStorage 获取坐标的线条。然而，线条被绘制并在一秒钟内消失。

以下是代码：

//clicked_id is returned by the thumbnail

function clickedImage(clicked_id) {
  localStorage.setItem('sel_id', clicked_id);
  //Get the complete path of the image
  var clickedImg = document.getElementById(clicked_id).src;
  var activeImg = document.getElementById(clicked_id).src;

  //store the complete path
  localStorage.setItem("activeImg",activeImg);
  var clickedImg = basename(clickedImg,"/");
  localStorage.setItem("clickedImage", clickedImg);
  var clickedImg = clickedImg.replace(/^.*[\\\/]/, '');

  //draw lines on canvas
  var canvas = document.getElementById("imgcanvas");
  var regcanvas = document.getElementById("drawcanvas");
  var ctx = canvas.getContext("2d");
  var ctxr = regcanvas.getContext("2d");
  var arr = new Array();
    //Perform calculations to get the fourth coordinate
    arr = fourthCoord(getArray(arr));
    for (var i = 0; i < arr.length; i++) {
      if (arr[i][0] === clickedImg) {
        first.x = arr[i][3];
        first.y = arr[i][4]; 
        second.x = arr[i][5]; 
        second.y = arr[i][6]; 
        third.x = arr[i][7]; 
        third.y = arr[i][8]; 
        fourth.x = arr[i][9]; 
        fourth.y = arr[i][10]; 
        ctxr.lineCap = "round";
        ctxr.lineWidth = 3;
        ctxr.strokeStyle = '#f4d03f';
        ctxr.beginPath();
        ctxr.moveTo(first.x,first.y);
        ctxr.lineTo(second.x,second.y);
        ctxr.lineTo(third.x,third.y);
        ctxr.lineTo(fourth.x,fourth.y);
        ctxr.lineTo(first.x,first.y);
        ctxr.stroke();
        console.log(first,second,third,fourth);
      }
    }

  //Load the image
  var thumbNails = document.getElementById("loaded_img_panel");
  var pic = new Image();
  pic.onload = function() {
    canvas.width = pic.width;
    canvas.height = pic.height;
    regcanvas.width = pic.width;
    regcanvas.height = pic.height;
    ctx.drawImage(pic, 0,0)
  }

  thumbNails.addEventListener('click',function(event) {
    pic.src = event.target.src;  
  });
}

getArray() 函数获取线条的坐标。我在示例画布上使用相同的代码，单击画布（而不是单击图像）绘制线条。然而，在这个应用程序中，线条被绘制（我可以看到几分之一秒）然后消失。

试验一：

我调用了thumbNail 的两个函数onclick - clickedImage() 和drawAnnotations()。我将所有与画线有关的代码移到 drawAnnotations() 中。这没有用。

试验二：

我在缩略图的 mousedown 事件上调用了第一个函数 clickedImage()，在缩略图的 mouseup 事件上调用了 drawAnnotations()。这也没有奏效。

试验 3：

我创建了一个window.addEventListener ...并调用了drawAnnotation函数onload

window.addEventListener("DOMContentLoaded", function(event) {
    document.getElementById('drawcanvas').addEventListener("load", drawAnnotations);
});

这也不起作用......意思是......它画了线条......但瞬间消失了。

标签： javascripthtmlcanvas