dangirubaの日記

Webkit系ブラウザのCanvasでのドラッグあれこれ

ちょっとHTML5のCanvas使ってお絵かきできるアプリを作ってる時に引っかかったので。

FirefoxとかOperaとかなら問題ないんですけど
Chrome、Safariを使っていると、ドラッグした時にマウスカーソルが
テキスト選択字のマウスカーソルになってしまうんですね。



この赤矢印みたいなカーソルになっちゃうんです。

これはお絵かきには向いてないなー。と思って色々調べてました。
最初はonSelectStartで実装したんですけど、これだと一部分だけ
選択不可能にすることができなかったんですね・・(´・ω・`)

これは嫌だったので、onMouseDownで実装しました。
やり方は、canvasタグに「 onMouseDown="return false;"」を付け足すだけ。

<canvas id="myCanvas" width="640" height="480" onMouseDown="return false;">
HTML5 Canvasに対応したブラウザを使用してください(Google Chrome等)
</canvas>

こんな感じです！

これでcanvasをクリックしてもマウスカーソルが変わらないようになりましたっ。

Permalink | コメント(0) | トラックバック(0) | 21:17