如何在单击时从 canvas 中删除位图图像

Question

我正在使用 createjs 作为我的框架。我在 canvas 上放置了一个位图，并创建了一个函数来尝试删除它，但我一直在控制台中收到一条错误消息，指出图像未定义。这是我的代码的样子：

// onload=init() called in html doc
function init(){

var canvas = new createjs.Stage("canvas");

// Add image to canvas
image = new createjs.Bitmap("image.png");
image.x = 200;
image.y = 180;
image.scaleX = 0.35;
image.scaleY = 0.35;
canvas.addChild(image);

image.addEventListener('click', pop);

canvas.update();
}

//remove image from canvas
function pop() {
console.log('pop');
canvas.removeChild(image);
}

当我点击它时，我收到控制台消息 "pop"，然后是我上面提到的错误。我试过将函数移到 init 中，但我似乎遇到了同样的问题。

Answer 1

这是范围问题。您在 init 函数中定义了 image，因此无法通过 pop 方法访问它。

有两个简单的修复方法。将 var image 移到 init 函数之外，或者改用点击目标。

var image;
function init() {
  init = new createjs.Bitmap();
  // etc
}

// OR

function pop(event) {
  stage.removeChild(event.target);
}

在构建 JavaScript 应用程序时了解范围非常重要，因此我建议更好地了解它:)

干杯，

Answer 2

将图像作为全局变量，以便它可以被您的案例函数中的所有函数访问pop。

 var image;// defining 'image' variable as global
 function init(){

    var canvas = new createjs.Stage("canvas");

   // Add image to canvas
   image = new createjs.Bitmap("image.png");
   image.x = 200;
   image.y = 180;
   image.scaleX = 0.35;
   image.scaleY = 0.35;
   canvas.addChild(image);

   image.addEventListener('click', pop);

   canvas.update();

}

//remove image from canvas
function pop() {
  console.log('pop');
  canvas.removeChild(image);
}

如何在单击时从 canvas 中删除位图图像

How to remove bitmap image on click from canvas

javascript

bitmap

html5-canvas

createjs

easeljs