html canvas - 位置在前面/後面？

Javascript新手問題 - 我有以下。它繪製我的矩形很好，但總是在後面。我怎樣才能把它移到前面？html canvas - 位置在前面/後面？

的Javascript：

function happycode() { 
    var element = document.getElementById("myCanvas"); 
    var context = element.getContext("2d"); 
    context.fillStyle="#FF7700"; 
    context.fillRect(900, 200, 300, 300); 
};

HTML：

<body onload=happycode();> 
    // lots of elements here 
    <canvas position="absolute" id="myCanvas"width="2000px"height="1000px"z-index=1000></canvas> 
</body>

來源

2012-03-23 William Jockusch

第一關width="2000px"height="1000px"不正確，它應該只是width="2000" height="1000"

position="absolute"和z-index=1000也是不正確，你試圖寫CSS樣式屬性就好像它們是一個畫布屬性一樣。你需要這樣寫：

<canvas id="myCanvas" width="2000" height="1000" style="z-index:1000; position: absolute; top: 0px; left: 0px;"></canvas>

這會給你想要的東西。例如這裏：http://jsfiddle.net/FpDe6/

注意這裏說的畫布的寬度和高度的畫布屬性和不 CSS屬性。這是一種獨特的，並混淆了很多畫布新手。

如果將CSS寬度/高度設置爲某個像素值，則不會更改畫布本身的尺寸，而是會拉伸畫布並使其看起來很奇怪。

所以僅僅是明確的，這是好事，將來會成爲一個500×帆布：

<canvas id="myCanvas" width="500" height="500"></canvas>

這是不好的，將來會成爲一個默認的帆布（300x150），並延伸到500×500，使得一切看起來古怪縮放：

<canvas id="myCanvas" style="width: 500px; height: 500px;"></canvas>

來源

2012-03-23 14:15:38

'Z-index'也是一個CSS屬性，而不是HTML屬性。 – RoToRa 2012-03-23 15:47:30

哎呀！修正了，謝謝！ – 2012-03-23 15:50:59

html canvas - 位置在前面/後面？

回答

相關問題