console.log(ctx.drawimage(...)) 输出未定义。为什么？

Question

我正在尝试使用 .js 中的 HTML canvas 来输出图像。很容易。很确定它应该工作。但是，事实并非如此。所以，我尝试做一个 console.log 的 ctx.drawImage 方法。它 returns 未定义。那是正常的吗？它应该打印我的图像吗？怎么回事？

此外，如果您有兴趣，这是我的代码：

let c = document.createElement("canvas");
let ctx = c.getContext("2d");

c.width = 752;
c.height = 386;
ctx.globalAlpha = 1.0;
let TopPadding = 106; // Distance from top of slide
let leftSidePadding = 650;
let imageHeight = 45;
let imageWidth = 46;

let img = new Image();
img.src = 'app/resources/Uploaded/Info.png';
console.log(img);
img.onload = () => {
    console.log(ctx.drawImage(img, 0, 0, imageWidth, imageHeight));
    ctx.drawImage(img, leftSidePadding, TopPadding, imageWidth, imageHeight);
    console.log('Hello, Martian!!');
};
  
console.log('Hello, Earthling!!');

Answer 1

别忘了将您的 canvas 添加到 HTML 文档中！ :)

document.body.appendChild(ctx.canvas);

此外，undefined 可能是预期的；我不认为 drawImage returns 什么。

console.log(ctx.drawimage(...)) 输出未定义。为什么？

console.log(ctx.drawimage(...)) outputs undefined. Why?

javascript

html5-canvas