Dart中的画布：如何加载和显示图像

Question

首先从DOM获取CanvasElement并获取画布上下文：

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);
});

不起作用，画布仍然空白。 我确信图像已正确加载，因为我可以将它放在DOM中：

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

另外我认为画布和上下文已正确初始化，因为我能够绘制矩形：

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

我试图谷歌类似的问题，但他们所有的解决方案只是image.onLoad.listen（），我已经在我的代码中。

Answer 1

（从评论中复制，所以这个问题似乎已经回答！）

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