角画布只绘制上一次迭代

Question

1. 我想用帆布做一个有角的棋盘。但它只是绘制了最后一次迭代。
2. 我试过了onload函数。
3. 这是我的代码： createBoard()：void { let row = 8；let l= 8；设x= 1；y= 'a'；设posx = 0；设posy = 0；设ctx = this.canvas.nativeElement.getContext('2d')；for(设i= 0；i< row；i++){ posx = 0；for(设j= 0；j< col；j++) { let img =新图像()；img.onload = ctx.drawImage(img，posx，posy，75，75)；} if ((i + j) %2 == 0) { img.src =“img.src /img/Boardsquare_light_正常化.img”；}y= this.nextChar(y)；posx += 75；}x += 1；y= 'a'；posy += 75；} }

Answer 1

您需要两个图像img1和img2。由于需要在绘制之前加载这两个图像，可以使用rxjs运算符和rxjs fromEvent运算符。

fromEvent，就像

formEvent(img1,'load').subscribe(_=>{
     ...
})

//its equal than
img1.onLoad=function(){
 ...
}

观察的好处是你可以组合，合并，改变.(我知道一开始有点困难，但一点知识是必要的，记住，在角度上，所有的都是可观测的)

zip，在所有可观察到的发出之后，都会以数组的形式发出值。

这样你就可以写一些

zip([fromEvent(img1,'load'),fromEvent(img2,'load')]).subscribe(_=>{
  for(let i = 0; i < row; i++){
    posx = 0;
    for(let j = 0; j < col; j++) {
      if ((i + j) % 2 == 0)
        ctx.drawImage(img1, posx, posy, 75, 75);
      else
        ctx.drawImage(img2, posx, posy, 75, 75);
      posx += 75;
    }
    posy += 75;
  }
})
img1.src='https://picsum.photos/id/100/75/75';
img2.src='https://picsum.photos/id/235/75/75'

你可以看到一个愚蠢的闪电战