JavaScript 图像背景

Question

我所在的小组正在编辑现有 Javascript/HTML5 游戏的源代码，我们正在尝试将其制作成我们自己的游戏，用于学校的小组元素。我在将背景 Canvas 更改为我找到的图像时遇到问题。据我所知，这是在现有代码中创建 Canvas 的所有代码。

    var CANVAS_WIDTH = 320;
    var CANVAS_HEIGHT = 300;

    var canvasElement = $("<canvas width='" + CANVAS_WIDTH + 
      "' height='" + CANVAS_HEIGHT + "'></canvas");
    var canvas = canvasElement.get(0).getContext("2d");
    canvasElement.appendTo('body');

原始源代码从此链接给出: http://www.html5rocks.com/en/tutorials/canvas/notearsgame/

顺便说一句，这家伙说他正在使用 jquery 作为 Canvas 。我不知道这会如何影响事情。 基本上，我只是想将游戏的背景图像更改为太空或太空图片。任何帮助将不胜感激，谢谢!

Answer 1

您可以使用CSS向 Canvas 添加背景，如下所示:

<style type="text/css" media="screen">
canvas, img { display:block; margin:1em auto; border:1px solid black; }
canvas { background:url(spacebackground.jpg) }
</style>

希望对您有帮助!有关更多信息，请参阅其他堆栈溢出帖子: How to set the background image of a html 5 canvas to .png image