HTML Canvas 不显示图像

Question

我无法使用 drawImage() 让我的图像显示在 HTML 画布中。我知道文件路径是正确的，因为当我禁用 display: none; 时图像显示得很好 我知道当您尝试在加载图像之前绘制图像时会发生这种情况，您可以通过使用 onload 属性来避免这种情况。

这里是相关的 HTML。

<canvas id='gameScreen'></canvas>
<img id="imgBall"src="assets/images/ball2.png" alt="ball">
<script type="module"src="src/index.js"></script>

这里是相关的 Javascript。

// CANVAS SETUP
let canvas = document.getElementById("gameScreen");
canvas.width = 800;
canvas.height = 600;
let ctx = canvas.getContext("2d");

// DISPLAY BALL
let imgBall = document.getElementById('imgBall');

imgBall.onload = function() {
    console.log(imgBall.src + ' successfully loaded');
    ctx.drawImage(imgBall, 10, 10);
}

imgBall.onerror = function() {
    console.log(imgBall.src + ' failed to load');
}

让我感到困惑的是，我没有从 imgBall.onload 或 imgBall.onerror 收到任何控制台消息。

我对 Javascript 和 canvas 还很陌生，所以如果答案非常明显，我深表歉意。

Answer 1

为了解决这个问题，我动态创建了一个图像标签，然后在我添加了错误和 onload 的事件处理程序之后给它一个 src。

这让我认为问题是由于在您的脚本标签有机会将事件侦听器添加到 img 标签之前加载图像造成的。

// CANVAS SETUP
let canvas = document.getElementById("gameScreen");
canvas.width = 800;
canvas.height = 600;
let ctx = canvas.getContext("2d");

// DISPLAY BALL
const imgBall = document.createElement("img");

imgBall.onload = function() {
    console.log(imgBall.src + ' successfully loaded');
    ctx.drawImage(fitImageOntoCanvas(imgBall,25,25), 10, 10);
}

imgBall.onerror = function() {
    console.log(imgBall.src + ' failed to load');
}

imgBall.src = "https://pngimg.com/uploads/football/football_PNG52737.png"


// need to resize because my ball image is huge
// thanks @markE https://stackoverflow.com/questions/38664890/resize-images-with-canvas-before-uploading
function fitImageOntoCanvas(img,MAX_WIDTH,MAX_HEIGHT){

    // calculate the scaling factor to resize new image to 
    //     fit MAX dimensions without overflow
    var scalingFactor=Math.min((MAX_WIDTH/img.width),(MAX_HEIGHT/img.height))

    // calc the resized img dimensions
    var iw=img.width*scalingFactor;
    var ih=img.height*scalingFactor;

    // create a new canvas
    var c=document.createElement('canvas');
    var ctx=c.getContext('2d');

    // resize the canvas to the new dimensions
    c.width=iw;
    c.height=ih;

    // scale & draw the image onto the canvas
    ctx.drawImage(img,0,0,iw,ih);
    
    // return the new canvas with the resized image
    return(c);
}

<canvas id="gameScreen" height="500" width="500"></canvas>