gpt4 book ai didi

javascript - DrawImage 不会在第一帧加载

转载 作者:行者123 更新时间:2023-12-02 19:10:56 27 4
gpt4 key购买 nike

我的 Canvas 有一个简单的绘制图像,但它不会显示在第一帧上。

这让我发疯,我不知道为什么它不会这样做!!

这是我的脚本:

img = new Image();
img.src = 'images/0.png'; //preLoad the image


window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback, element){
window.setTimeout(callback, 1000 / 60);
};
})(); //frames per second


function gameUpdate(){
previous = 0;
requestAnimFrame( gameUpdate );
draw();
}

然后draw()函数有这样的:

//doesn't display on first fame
canvas['canvas1'].ctx.drawImage(img, 100, 150);

//displays on first frame
canvas['canvas1'].ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
canvas['canvas1'].ctx.fillRect (30, 30, 55, 50);

FillRect 工作正常,但第一帧的绘制图像不行,有什么想法为什么会这样吗?

最佳答案

我认为您应该通过在 gameUpdate 函数外部调用 requestAnimFrame 来启动动画循环

requestAnimFrame(gameUpdate)

您可能还需要确保图像确实已加载

var img = new Image();
img.onload = function() {
// do the draw image here
}
img.src = 'images/0.png'; //preLoad the image

关于javascript - DrawImage 不会在第一帧加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13731882/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com