問題発生
状態:-
閲覧数:1,865
投稿日:2014-06-07
更新日:2014-06-07
謎の挙動
・下記コードを試したら、びっくりするぐらい謎の挙動を示して悩む
・以前のIEバグを連想するぐらい、指定サイズと表示サイズが異なる
・縦横比もおかしくなり、描画した図形が縦に伸びてしまう
・HTML
・CSS
・JavaScript
・Canvasのwidth/heightを、CSSで指定したから
・Canvas要素のwidth/heightは、CSSではなくCanvasタグで直接指定する
・なめてんじゃねーよ、てくらい頭に来た
・何なのこの仕様?
・CSSバカにしてるの?
・HTML直書は避けようとするから、これ普通にハマるよね?
Canvas要素
・width … 初期値300
・height … 初期値150
・初期値云々の話ではない
・サイズだけではなく比率も変わってくる時点で、CSS指定は全く使えない
・これ調査するのにかかった3時間と、「何なのコレ?全然分からん」とブルーになる前の「土曜の朝のいい感じだった気持ち」を、誰か返してくれー
・下記コードを試したら、びっくりするぐらい謎の挙動を示して悩む
・以前のIEバグを連想するぐらい、指定サイズと表示サイズが異なる
・縦横比もおかしくなり、描画した図形が縦に伸びてしまう
・HTML
<canvas id="stage"></canvas>
・CSS
#stage{
width:600px;
height:600px;
}
・JavaScript
var canvas=document.getElementById("stage");
var ctx=canvas.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,50,50)
原因
・Canvasのwidth/heightを、CSSで指定したから
対策
・Canvas要素のwidth/heightは、CSSではなくCanvasタグで直接指定する
<canvas width="600" height="600" id="stage">
感想
・なめてんじゃねーよ、てくらい頭に来た
・何なのこの仕様?
・CSSバカにしてるの?
・HTML直書は避けようとするから、これ普通にハマるよね?
Canvas要素
・width … 初期値300
・height … 初期値150
・初期値云々の話ではない
・サイズだけではなく比率も変わってくる時点で、CSS指定は全く使えない
・これ調査するのにかかった3時間と、「何なのコレ?全然分からん」とブルーになる前の「土曜の朝のいい感じだった気持ち」を、誰か返してくれー