我正在制作一个游戏，它使用HTML画布并在上面绘制图像。每秒60次，它会清除屏幕并重新绘制所有元素以创建动画。然而，当我使用图像而不仅仅是形状时，图像会在那里，但会闪烁，不会一直可见。我以前做过这样的游戏(https://graphics-game.napoleon1027.repl.co/)它完全由正方形和圆形组成，从未出现过问题。然后，当我添加一个图像时，它开始闪烁。
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="900" height="600" style="border:1px solid #d3d3d3;">
</canvas>
<script>
var xcoord = 50
var ycoord = 50
function drawscreen() {
var ctx = document.getElementById('canvas').getContext('2d');
void ctx.clearRect(0, 0, 900, 600);
image = new Image()
image.src = "https://upload.wikimedia.org/wikipedia/en/c/c8/Very_Black_screen.jpg"
void ctx.drawImage(image, 0, 0, 200, 200, xcoord, ycoord, 50, 50);
ycoord++
xcoord++
}
setInterval(drawscreen, 16);
</script>
</body>
</html>
我没有用你给出的几行代码重现你的闪烁行为。然而，从这里可以看到，你可以做一些事情来优化你的代码：
- 在绘制框架时尽可能少地执行操作：
- 只获取一次画布绘图上下文
- 只加载一次图像
- 当客户端准备绘制新帧(目标为60fps(时，使用
window.requestAnimationFrame运行绘图功能
window.addEventListener('DOMContentLoaded', _e => {
const c = document.querySelector('#game-screen');
if (!c || !c.getContext)
return;
runGame();
function runGame() {
//Resources
const ctx = c.getContext('2d');
const image = new Image();
image.src = "https://picsum.photos/200";
//Game state
let xcoord = 50;
let ycoord = 50;
//Last rendered frame timestamp
let lastTs;
//Launch animation
window.requestAnimationFrame(drawFrame);
function drawFrame(timestamp) {
//Draw frame
ctx.clearRect(0, 0, 900, 600);
ctx.drawImage(image, 0, 0, 200, 200, xcoord, ycoord, 50, 50);
//Don't count on actual frame rate to compute moves
//ycoord++; xcoord++; //Will appear slower if frameRate on client < 60fps
updatePos(timestamp, lastTs);
lastTs = timestamp;
//Carry on animation
window.requestAnimationFrame(drawFrame);
}
function updatePos(timestamp, lastTs) {
//Move picture diagonaly at 60px/s
if (lastTs) {
const delta = timestamp - lastTs;
const deltaXY = Math.floor(delta * 60 / 1000); //60px per second
ycoord += deltaXY;
xcoord += deltaXY;
}
}
}
});canvas {
border: 1px solid black;
}<canvas id="game-screen" width="900" height="600">
Canvas not supported
</canvas>