使用图像作为背景画布

我正在制作简单的画布应用程序。使用图像作为背景画布

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

我发现我应该使用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);

来源

2013-08-03 whitebear

假设你的图像drummap.jpg位于表示目录，创建图像，设置为使用新的图像的onload事件，并然后设置src（see）：

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

img.src = 'drummap.jpg';

来源

2013-08-03 19:52:13 federicot

谢谢@坎帕里，但它不工作..并没有控制台上的错误消息。 'drummap.jpg'位于正确的目录中。 – whitebear

@whitebear如果你注释掉你的'ctx.fillStyle =“rgba（0,0,0,0.7）”'行，该怎么办？它可能会在图像的顶部绘制全部黑色，所以您看不到它。 – federicot

我引用了这个示例代码，现在我删除了ctx.fillStyle句子，但它不会改变。 – whitebear

我我不确定你是如何清理画布或绘制什么的，但记住你的画布本来就是透明的，所以随意给画布一个css风格的背景：

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

希望有所帮助。

来源

2013-08-04 03:05:17 ericjbasti

使用图像作为背景画布

回答

相关问题