マウスをドラッグしているときにHTML5キャンバス上にカーソルを移動

Question

キャンバスタグを使用してペイントブラシタイプのアプリケーションを作成しました。私は

<canvas id="draw" style="cursor: url(image/pencil.cur)"> 

が、私はこれを達成してきたが、私は画像

Answer 1

マウスボタンが要素の上にダウンしているときにカーソルを変更するには:active CSSの擬似クラスを使用します。

#draw:active { 
    cursor: url(image/pencil.cur); 
} 

作業例：http://jsfiddle.net/nXv63/

Answer 2

つを描画するために、マウスをドラッグしながら、私は、カーソルを変更するものとする方法を見つけ出すカントマウスがキャンバスカーソルの変更の上にあるときに、というたかりました

：

1. はこのjQueryのフラグメントと同じラインに沿って、カーソルを変更するには、いくつかのJavaScriptを使用してください：私はの一つは、あなたが望むものを達成かもしれない、このためと考えることができますアプローチ

   $('canvas#draw').css('cursor', 'url(image/another-cursor.cur)'); 
   

   マウスボタンを押したときにそのイベントを使用し、リリース時に元の状態に戻す場合は、それがあなたが望む正確な効果があると思います。

2. キャンバス自体に「カーソル」を描画し、キャンバス上でマウスの位置を追跡させます。この方法で、Photoshopスタイルのサークル（その他）を描いて、どこで描画を行うかを指定できます。私はこのアプローチでパフォーマンスがどのようになるかはわかりませんが（私はそれを試していませんでしたが）、うまくいくはずです。キャンバスのマウス移動で発生したイベントを使用します。これはおそらく、ペイントの配置先を追跡するために既に使用しているものです。

Answer 3

ここに罰金作品： http://jsfiddle.net/Mutant_Tractor/DMBWC/1/

Answer 4

キャンバスに「ドラッグ」クラスを追加します。

は次に、このスタイルを追加の上にある（とのmouseUpにそれを削除）アクションをドラッグ：

canvas {cursor: default;} 
canvas.dragging {cursor: crosshair;} 

Answer 5

まだこのWebKitのバグに対する解決策を探しているいずれかの場合：https://bugs.webkit.org/show_bug.cgi?id=105355、これは私がやったことです。

body要素にこのプロパティを追加して、ページ内のすべてのテキストを選択できないようにしました。

body { 
    -webkit-touch-callout: none; 

    -webkit-user-select: none; 

    -moz-user-select: none; 

    user-select: none; 
} 

実際に選択可能な要素が必要な場合は、CSSを変更する必要があります。