Javascript pts.js'；NS#U错误(不可用)'；尝试为粒子使用图像时出错

我想为pts.js中的粒子加载相同的图像

当我尝试使用资产文件夹中的本地映像时，控制台中会出现错误“NS\u error\u NOT\u AVAILABLE:”

我在某个地方读到，这可能是因为图像在加载之前试图使用

我也尝试过使用外部链接到其他图像，而不是本地图像，这很有效。所以我不确定我的本地文件发生了什么

编辑：

我只是在chrome而不是firefox上尝试了这个，我得到了一条新的更详细的错误消息

未捕获的DomeException:未能在“CanvasRenderingContext2D”上执行“drawImage”：提供的HTMLImageElement处于“断开”状态。在pts.min.js:6中

仍然不确定到底出了什么问题

Pts.quickStart('#hello', 'transparent')

var world

// Loading in image to be used
var myImg = new Image()
myImg.src = '/assets/img/myImage.png'

space.add({
  start: (bound, space) => {
    // Create world and 100 random points
    world = new World(space.innerBound, 1, 0)
    let pts = Create.distributeRandom(space.innerBound, 20)

    // Create particles and hit them with a random impulse
    for (let i = 0, len = pts.length; i < len; i++) {
      let p = new Particle(pts[i]).size(i === 0 ? 10 : 20)
      p.hit(0, 0)
      world.add(p)
    }

    world.particle(0).lock = true
  },

  animate: (time, ftime) => {
    world.drawParticles((p, i) => {


// Image variable for the particle to be drawn as
      form.image(myImg)
    })

    world.update(ftime)
  },

  action: (type, px, py) => {
    if (type == 'move') {
      world.particle(0).position = new Pt(px, py)
    }
  },

  resize: (bound, evt) => {
    if (world) world.bound = space.innerBound
  }
})

space.bindMouse().bindTouch()
space.play()

Pts.quickStart（“#你好”，“透明”）
var世界
//正在加载要使用的图像
var myImg=新图像（）
myImg.src='/assets/img/myImage.png'
space.add({
开始：（已绑定，空格）=>{
//创建世界和100个随机点
世界=新世界（space.innerBound，1,0）
让pts=Create.distributeRandom（space.innerBound，20）
//创建粒子并用随机脉冲击中它们
for（设i=0，len=pts.length；i{
世界。drawParticles（（p，i）=>{
//要绘制为的粒子的图像变量
表格图像（myImg）
})
世界更新（ftime）
},
动作：（类型，px，py）=>{
如果（类型==“移动”）{
世界粒子（0）.位置=新粒子（px，py）
}
},
调整大小：（绑定，evt）=>{
如果（世界）world.bound=space.innerbund
}
})
space.bindMouse（）.bindTouch（）
space.play（）

对于在画布上绘制图像，需要首先加载图像。您可以使用

myImg.addEventListener（'load'，…）

跟踪它

加载后，您可以在Pts的动画循环中的

form.image（myImg，…）

中使用它

下面是一个基于上述代码的工作示例：

Pts.quickStart( "#pt", "#123" );

//// Demo code starts (anonymous function wrapper is optional) ---

(function() {

  var world;
  var imgReady = false;

    // Loading in image to be used
    var myImg = new Image()
    myImg.src = 'http://icons.iconarchive.com/icons/icojoy/maneki-neko/256/cat-6-icon.png';
    myImg.addEventListener('load', function() {
        imgReady = true;
    }, false);

  space.add( {

    start: (bound, space) => {

      // Create world and 100 random points
      world = new World( space.innerBound, 1, 0 );
      let pts = Create.distributeRandom( space.innerBound, 100 );

      // Create particles and hit them with a random impulse
      for (let i=0, len=pts.length; i<len; i++) {
        let p = new Particle( pts[i] ).size( (i===0) ? 30 : 3+Math.random()*space.size.x/50 );
        p.hit( Num.randomRange(-50,50), Num.randomRange(-25, 25) );
        world.add( p );
      }

      world.particle( 0 ).lock = true; // lock it to move it by pointer later on

    },


    animate: (time, ftime) => {
      world.drawParticles( (p, i) => {
        if (imgReady) {
          console.log( p )
          form.image(myImg, [p.$subtract( p.radius ), p.$add( p.radius )] );
        }
      });

      world.update( ftime );
    },


    action:( type, px, py) => {
      if (type == "move") {
        world.particle( 0 ).position = new Pt(px, py);
      }
    },

    resize: (bound, evt) => {
      if (world) world.bound = space.innerBound;
    }
  });

  space.bindMouse().bindTouch();
  space.play();

})();

Pts.quickStart（“#pt”，“#123”）；
////演示代码启动（匿名函数包装器是可选的）---
（功能（）{
var世界；
var imgReady=假；
//正在加载要使用的图像
var myImg=新图像（）
myImg.src=http://icons.iconarchive.com/icons/icojoy/maneki-neko/256/cat-6-icon.png';
myImg.addEventListener（'load'，function（）{
imgReady=真；
}，假）；
空格。添加（{
开始：（已绑定，空格）=>{
//创建世界和100个随机点
世界=新世界（space.innerBound，1,0）；
设pts=Create.distributeRandom（space.innerBound，100）；
//创建粒子并用随机脉冲击中它们
对于（设i=0，len=pts.length；i{
世界。drawParticles（（p，i）=>{
如果（imgReady）{
console.log（p）
形式图像（myImg，[p.$减去（p.半径），p.$添加（p.半径）]；
}
});
世界更新（ftime）；
},
动作：（类型，px，py）=>{
如果（类型=“移动”）{
粒子（0）位置=新的粒子数（px，py）；
}
},
调整大小：（绑定，evt）=>{
如果（world）world.bound=space.innerbund；
}
});
space.bindMouse（）.bindTouch（）；
空间。游戏（）；
})();