为什么我看不到画布上的图像?

我在javascript方面非常新。在第一分钟,我遇到的第一个问题是我在画布上看不到图像。我假设getContext函数无法正常工作。我进行了大量搜索,但找不到任何解决方案。这是我的简单代码:

let cvs = document.getElementById("canvas");
let ctx = cvs.getContext("2d");
console.log(ctx);


let bg = new Image();


bg.src = "images/bg.png";


function draw() { 

    ctx.drawImage(bg,0,0);
}

draw();
评论
  • Oo珑玲
    Oo珑玲 回复

    您必须等待图像加载

    let cvs = document.getElementById("canvas")
    let ctx = cvs.getContext("2d")
    let bg = new Image()
    bg.src = "https://picsum.photos/300/200"
    bg.addEventListener('load', () => {
      ctx.drawImage(bg, 0, 0)
    })
    <canvas id="canvas"></canvas>