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（see）：

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>

希望有所帮助。

使用图像为画布背景

2 个答案: