Javascript の canvas の scale がおかしい。event…

Javascript の canvas の scale がおかしい。event の x 座標がどうにかこうに読み取ったと思ったら、context.scale(2,1) を指定しないと位置が合わない。横が半分になってるくさい。
JRF 2011年10月31日

ググると、＞CanvasのサイズをCSSで指定したらおかしく＜なるらしい。

だから、canvas.style.width = "100px"; canvas.style.height = "100px" とか指定したら *ダメ* で、

<pre>
canvas.width = 100;
canvas.height = 100;
</pre>

と指定しないといけなかった。

《[HTML5] Canvasに描写 ? 簡単なPixel3D ? Sakef Blog》
http://sakef.jp/blog/2010/11/html5_canvas_pixel3d/

JRF 2011年10月31日

ついでに、イベントで、offsetX が DOM にはないと知ってショックを受けた。Firefox で canvas の mouseover や click を addEventListener して、offsetX を調べると、undefined が返ってくる。

ググると、offsetX, offsetY は Firefox にはなく、替わりに layerX, layerY があるとのこと、しかも IE9 では offsetX は addEventListener のコールバックで渡される event にはなく、window.event オブジェクトにはあるとかあるらしい。

JRF 2011年10月31日

《本の虫: DOM level 3のマウスイベントにおけるカーソル位置の詳細》
http://cpplover.blogspot.com/2009/06/dom-level-3.html

JRF 2011年10月31日

これ、最初は IMG と MAP と AREA を使ってやろうかとも思ったのだが、どうもうまくいかないので、addEventListener を使ってさらに原始的にやることにした。

《Modifying AREA Elements on the Fly : Area - HTML - JavaScript DHTML》
http://www.java2s.com/Code/JavaScript/HTML/ModifyingAREAElementsontheFly.htm

JRF 2011年10月31日

他のところでは、Canvas で UI みたいなことしたいなら、SVG を使ったらいいじゃんって書いてたんだけど、SVG は資料が少なく、特別に覚えること多そうなんでちょっとやなんだよね。だったら、Flash でいいじゃんみたいな。

《Does (HTML5) Canvas have the equivalent of an image map? - Stack Overflow》
http://stackoverflow.com/questions/2932141/does-html5-canvas-have-the-equivalent-of-an-image-map

JRF 2011年10月31日

ちなみに、addEventListener で mouseover 使うときは mouseout の処理もしないとダメ。メンドクサイ。

JRF 2011年10月31日