Question

有没有办法在Dart Canvas上以合理的FPS单独有效地绘制多个角色？

我正在渲染一个具有不同颜色，背景矩形等的字符数组，并且只有在字符＆＃34;解析字符时才能顺利运行。是最大40x40。

这是绘图方法：

static draw(CanvasRenderingContext2D ctx, CanvasRenderingContext2D ctxUnvisible) {

  for(int i = 0; i < chars.length; i++) {
    for(int j = 0; j < chars[0].length; j++) {
      ctxUnvisible.fillRect(i*offX, j*offY, (i+1)*offX, (j+1)*offY);
    }
  }

  for(int i = 0; i < chars.length; i++) {
    for(int j = 0; j < chars[0].length; j++) {
      ctxUnvisible.fillStyle = charArray[i][j].color;
      ctxUnvisible.fillText(charArray[i][j].char, i*offX, j*offY);
    }
  }
  ctx.drawImage(ctxUnvisible.canvas, 0, 0);
}

第一个双循环将背景矩形渲染为＆＃34;文本背景＆＃34;第二个绘制角色本身。这对于大量的角色来说是不可行的。有没有更有效的绘制方式？我已经开始绘制不可见的画布，然后将其复制到可见的画布上，但这还不够。

Answer 1

在系统中，所有单个字符都是预呈现的（我听说过，未经确认）。你可以制作懒惰的CanvasElements Map，并绘制像图像一样的每个角色。例如：

CanvasElement precompiled_a = new CanvasElement(width:20, height:20);
CanvasRenderingContext2D ctx = precompiled_a.context2D;
ctx.fillStyle = "black";
ctx.fillText("a", 10, 10);
CanvasElement c = querySelector("canvas");
c.context2D.drawImage(precompiled_a, 2, 2);

Canvas多个Text绘制性能

1 个答案: