htmlキャンバス - 正面/背面の位置？

Javascript初心者の質問 - 私は以下を持っています。それは私の矩形をうまく描画しますが、常に後ろにあります。どうすれば正面に移動できますか？htmlキャンバス - 正面/背面の位置？

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>

そして、それはあなたが望むものをお渡しします。ここでは例：キャンバスの幅と高さは、キャンバスの属性とない CSS属性であることをここにhttp://jsfiddle.net/FpDe6/

注意。これは一種のユニークなことであり、多くのキャンバスの新人を混乱させます。

CSSの幅/高さをピクセル値に設定すると、キャンバス自体のサイズは変更されず、代わりにキャンバスを引き伸ばして非常に奇妙に見えるようになります。

だから明確にすること、これが良好で、500×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

おっと！修正しました、ありがとう！ –

htmlキャンバス - 正面/背面の位置？

答えて

関連する問題