使用圖像作爲背景畫布

我正在製作簡單的畫布應用程序。使用圖像作爲背景畫布

我想使用圖像作爲背景的畫布。

我發現我應該使用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

使用圖像作爲背景畫布

回答

相關問題