我正在开发我的第一个HTML5 Canvas游戏。我正在尝试放入背景图片,但我不知道该怎么做。游戏将在整个关卡中改变背景,但我想我知道如何做到这一点。但是,如果我只是尝试绘制图像,则该图像会出现在标题文本上方。任何想法如何解决这一问题?我认为CSS方法不会起作用,因为背景会改变。这是我的代码:
<!DOCTYPE html>
<html>
<head>
<title>How Well Do You Know Your Swedish?</title>
</head>
<body>
<canvas width="640" height="480" id="game" style="display: block; margin-left: auto; margin-right: auto; border: 1px solid black;" Your Browser is not compatible with this game. We recommend Google Chrome, Mozilla Firefox, or Opera.></canvas>
<script>
var game_canvas = document.getElementById("game");
var game_context = game_canvas.getContext("2d");
var swedishflagbg = new Image();
swedishflagbg.src = "resources/images/swedishflagbg.png";
swedishflagbg.onload = function() {
game_context.drawImage(swedishflagbg, 0, 0);
}
game_context.fillStyle = "#000000";
game_context.font = "35px Ubuntu";
game_context.textAlign = "center";
game_context.textBaseline = "top";
game_context.fillText("How Well Do You Know Your Swedish?", 320, 0);
</script>
</body>
</html>
我是JavaScript的新手,甚至还不是HTML5 Canvas的新手。
从评论扩展:
因为背景图像是在onload
事件中绘制的,所以事件将“稍后”发生,而文本则是立即绘制的。
因此,首先绘制文本,然后有时再绘制图像,从而使文本被覆盖。
根据背景图像的“动态”程度,可以考虑:
background-image
在cancas
/canvas
容器上使用CSS ,并使用className
/classList
在不同背景之间切换;<img>
在下方放置一个标签canvas
,并更改其src
属性;canvas
在当前背景下使用一个额外的“背景” ,因此您可以在当前背景下绘制游戏内容,并在新背景下绘制(可能不是经常更新的)背景。想法1和2的功劳归@markE :)
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句