如何在 HTML5 畫布上繪制背景圖像
[英]How to draw a background image on an HTML5 canvas
問題描述
我正在開發我的第一個 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 也是新手。
3 個解決方案
解決方案1
1 已采納 2014-11-30 06:06:05
從評論擴展：
“為什么”：
因為背景圖像是在onload事件中繪制的，這將在“稍后”發生，而文本是立即繪制的。
所以先繪制文本，有時再繪制圖像，從而導致文本被覆蓋。
“如何”：
根據背景圖像的“動態”程度，您可以考慮：
- 在
cancas/canvas容器上使用CSSbackground-image，並使用className/classList在不同背景之間切換； - 在
canvas下方放置一個<img>標簽，並更改其src屬性； - 在當前
canvas下方使用額外的“背景”canvas，這樣您就可以在當前canvas中繪制游戲內容，並在新canvas繪制（可能不經常更新的）背景。
想法 1 和 2 的功勞歸於 @markE :)
解決方案2
1 2019-12-12 11:59:12
第一件事：
- 檢查圖像的大小。 它應該等於畫布的大小。
-
context.drawImage還可以為圖像獲取寬度和高度參數。
語法： context.drawImage(img, x, y, width, height);
編輯后應該是這個樣子
let game_canvas = document.getElementById("game");
let game_context = game_canvas.getContext("2d");
let swedishflagbg = new Image();
swedishflagbg.src = "resources/images/swedishflagbg.png";
swedishflagbg.onload = function() {
game_context.drawImage(swedishflagbg, 0, 0, game_canvas.width, game_canvas.height);
}
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);
解決方案3
0 2020-08-23 07:44:20
對於仍然面臨背景圖像覆蓋文本問題的任何人（文本上方的圖像），我想“為什么在加載 bg 圖像后不在 onload 函數中繪制文本！？”
它奏效了！！ 瀏覽器（或其他）首先加載圖像並在圖像上方加載我的文本。
<canvas width="534" height="104" 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>
let game_canvas = document.getElementById("game");
let game_context = game_canvas.getContext("2d");
let swedishflagbg = new Image();
swedishflagbg.src = "./img/logo1.png";
swedishflagbg.onload = function() {
game_context.drawImage(swedishflagbg, 0, 0, game_canvas.width, game_canvas.height);
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>
HTML5畫布 - 如何在圖像背景上畫線？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.