ホームページ  >  記事  >  ウェブフロントエンド  >  Html5 Canvas 予備学習ノート (15) - マウスイベント

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

黄舟
黄舟オリジナル
2017-02-28 16:15:141350ブラウズ

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



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) に注目してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。