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

我是一个非常非常新的javascript新手,在第一分钟,我遇到了第一个问题,那就是在canvas上看不到图片。在第一分钟,我遇到了第一个问题,那就是我无法在canvas上看到图片。我认为是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();

解决方案:

你必须等待图像加载

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>

给TA打赏
共{{data.count}}人
人已打赏
未分类

在R中如何将列中的数字四舍五入?[重复]

2022-9-9 2:23:24

未分类

如何将Twitter api与mule集成

2022-9-9 2:34:17

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索