Question

因此，我尝试创建一个图像元素，然后使用Javascript将其绘制到画布上进行分配。这是我的代码

function drawCanvas() {
document.getElementById("heading").innerHTML = "Canvas Information";    
document.getElementById("output").innerHTML = "";
clearCanvas();
var x = document.createElement("IMG");
x.setAttribute("src", "pudge.png");
var c = document.getElementById("myCanvas");
ctx = c.getContext('2d');
c.width = window.innerWidth;
c.height = window.innerHeight;
ctx.drawImage(x,0,0);

我的问题是，由于某些原因，代码在第一次尝试时不会工作，但是在我运行它之后它会正常工作，即使清除画布我的其他功能。我假设它不能创建一个图像，然后一次性在画布上绘制它，因为如果我将图像元素直接放入带有一些id的html并调用它就像我用getElementById做画布那么它可以工作，但是我想在不修改HTML的情况下在函数中创建元素。我尝试用

创建一个createImage（）函数

var x = document.createElement("IMG");
x.setAttribute("src", "pudge.png");
return x;

无济于事。有什么帮助吗？

编辑：很抱歉由于缺少代码，这是一项任务，所以我不想发布太多可以找到并复制的代码。我准备发布它，但有人已经在事件清单提示，TY人员下面已经回答了这个问题！

Answer 1

您需要先允许图像加载。加载后，您可以将其绘制到画布上。

将NOPs添加到您的图片

addEventListener('load', e => ...)

旁注：不确定是否存在差异，但您可以使用function drawCanvas() { document.getElementById("heading").innerHTML = "Canvas Information"; document.getElementById("output").innerHTML = ""; clearCanvas(); var x = document.createElement("IMG"); x.setAttribute("src", "pudge.png"); x.addEventListener('load', e => { var c = document.getElementById("myCanvas"); ctx = c.getContext('2d'); c.width = window.innerWidth; c.height = window.innerHeight; ctx.drawImage(x, 0, 0); }) }代替var x = new Image

Javascript创建图像元素并在画布中绘制

1 个答案: