Html5 Canvas 予備学習ノート (15) - マウスイベント

この記事ではそのような例を完成させ、主人公をマウスで移動させます。効果は次のとおりです:

update関数は前の記事と同じで、コードは次のとおりです:

次に、initの初期化部分を見てください。これは、前の記事の例と同じです。コードは次のとおりです。 mousedown

、

mousemove

、

mouseupをそれぞれ定義し、それぞれマウスの押し、移動、持ち上げに対応します。コードは次のとおりです。 まず、次のコードを使用して座標を取得します。 次のコードはさまざまなブラウザで使用されます。

var mx,my;
if(ev.layerX || ev.layerX==0){
mx = ev.layerX;
my = ev.layerY;
}else if(ev.offsetX || ev.offsetX==0){
mx = ev.offsetX;
my = ev.offsetY;
}

次に、マウスの座標が範囲内にあるかどうかを確認します。画像の座標が範囲内にある場合は、座標がオフセットされます。

mousedown

が画像範囲内にある場合、

move

で画像座標を取り戻し、関数が解除されたら解放し、

canvas

に関数を登録する, この例を完成させてください / 上記は、「Html5 Canvas 予備学習ノート (15) - マウス イベント」の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。