html - 使用图像作为画布背景

Question

我正在制作简单的画布应用程序。

我想使用图像作为画布背景。

我发现我应该使用 drawImage(img,x,y)。

这是我的代码，但没有出现drummap.img。

哪里错了？

Test
<canvas id="leap-overlay"></canvas>
<script src="leap.js"></script>

<script>
var canvas = document.getElementById("leap-overlay");

// fullscreen
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;

// create a rendering context
var ctx = canvas.getContext("2d");
ctx.translate(canvas.width/2,canvas.height);


var img = new Image();
img.src = "drummap.jpg";
ctx.drawImage(img,0,0,100,100);

Answer 1

假设您的图像drummap.jpg位于上述目录中，创建图像，设置 onload 以使用新图像，然后设置 src（参见）：

var img = new Image();
img.onload = function () {
    ctx.drawImage(img, 0, 0, 100, 100);
};

img.src = 'drummap.jpg';

Answer 2

我不确定你是如何清理你的画布或你的画的，但请记住你的画布本质上是透明的，所以随意给画布一个 css 风格的背景：

<canvas style = "background-image: url(pathtoyourimage.jpg);"></canvas>

希望有帮助。