html - Dart中的Canvas:如何加载和显示图像

Question

首先，从DOM中获取CanvasElement并获取 Canvas 上下文:

CanvasElement canvas = querySelector('canvas');
CanvasRenderingContext2D context = canvas.getContext('2d');

从源生成图像:

ImageElement image = new ImageElement(src: 'placeholder.png');

比听onLoad事件并尝试绘制图像:

image.onLoad.listen((e) {
   context.drawImage(image, 0, 0);
});

不起作用， Canvas 仍然空白。
我确定图像已正确加载，因为我可以将其放置在DOM中:

image.onLoad.listen((e) {
   document.body.children.add(image);
});

我也认为 Canvas 和上下文已正确初始化，因为我能够绘制矩形:

context.fillRect (10, 10, 55, 50);

我曾尝试用谷歌搜索类似的问题，但是他们所有的解决方案只是image.onLoad.listen()我已经在我的代码中了。

Answer 1

(摘自评论，因此该问题似乎已得到解答!)

图片和 Canvas 的尺寸可能不匹配。您可以调整图像大小，或在渲染时使用context.drawImageScaled(image, 0, 0, 55, 50)缩放图像。