アカウント名:
パスワード:
<canvas id="canvas" width="300" height="300" style="width:150px;height:150px;">
より多くのコメントがこの議論にあるかもしれませんが、JavaScriptが有効ではない環境を使用している場合、クラシックなコメントシステム(D1)に設定を変更する必要があります。
アレゲはアレゲを呼ぶ -- ある傍観者
Canvasが縦2倍? (スコア:1)
動いてくれていない気がします。
以下のようなHTMLで実験してみたのですが、Safariが縦:横が1:1の図を描くのに対して
FireFoxは縦が2倍になった図になっています。
MacOS X環境下ではcanvas要素はQuartzを利用しているようなので環境依存の可能性
が高いのですが、これはバグでしょうか?
<html>
<head>
<script>
function draw() {
var canvas = document.getElementById( "canvas" );
var cxt = canvas.getContext( "2d" );
cxt.save();
cxt.strokeStyle = "black";
cxt.fillStyle = "blue";
cxt.lineWidth = "3.0";
cxt.moveTo( 0, 0 );
cxt.lineTo( 300, 300 );
cxt.stroke();
cxt.arc( 150, 150, 75, 0, Math.PI * 2, 0 );
cxt.fill();
cxt.restore();
}
</script>
</head>
<body>
<canvas id="canvas" style="width:300px;height:300px;">
</canvas>
<div onclick="draw()">DRAW</div>
</body>
</html>
kaho
Re:Canvasが縦2倍? (スコア:2, 参考になる)
(省略時のデフォルトサイズが300x150?)
ちょっと試してみたところ、Firefoxでは、 のように論理サイズとピクセルサイズを別個に指定することができそうです。
逆にSafariでは駄目みたいですけど(^^;)
Re:Canvasが縦2倍? (スコア:1)
Canvas要素を使ったDashboardウィジェットがFirefoxで動かないかと試していたので
互換性がとれるととても助かります。
kaho