HTML5 Canvas のマウスとキーボードのイベントのデモ example_html5 チュートリアルのスキル

WBOY

リリース： 2016-05-16 15:49:25

オリジナル

1418 人が閲覧しました

HTML5 Canvas のマウスイベントを示し、Canvas オブジェクト上のマウス座標を取得し、キーボードを介して Canvas 上のオブジェクトの動きを制御するキーボードイベントを示します。

Canvas オブジェクトは、マウスクリック (MouseClick)、マウスプレス (Mouse Down)、マウスリフト (Mouse Up)、マウス移動 (Mouse Move) を含むすべての JavaScript マウスイベントをサポートしています。 2 つの方法、1 つは API を通じて完了する方法です:

コードをコピーします

コードは次のとおりです:

// マウスイベント
canvas.addEventListener("mousedown",doMouseDown,false);
canvas.addEventListener('mousemove', doMouseMove,false);
canvas.addEventListener( 'mouseup ', doMouseUp, false);
JavaScript では別の方法をアンチパターンと呼びます:

コードをコピー

コードは次のとおりです。

canvas.onmousedown = function(e){
}
canvas.onmouseup = function(e){
}
canvas.onmousemove = function(e){
}

Canvas オブジェクト上のマウスの座標を取得します:
Canvas 上のマウスの座標Canvas 上のマウスイベントでは直接取得できないため、
画面全体の座標に基づいて取得されます。したがって、マウスの位置はマウスイベント e.pageX および e.pageY を通じて取得され、画面に対する Canvas オブジェクトの相対位置は
Canvas.getBoundingClientRect() を通じて取得され、マウスの座標が取得されます。 Canvas 内の値は

を計算して取得されます。コードは次のとおりです。

コードをコピー

コードは次のとおりです。

function getPointOnCanvas(canvas, x, y) {
var bbox =canvas.getBoundingClientRect();
return { x: x- bbox.left *( Canvas.width / bbox.width),
y:y - bbox.top * (canvas.height / bbox.height)
}

キーボードイベント:
HTML5 Canvas 自体はキーボードイベントの監視と取得をサポートしていません。この問題を解決するためによく使用される方法は 2 つあります:

1: Windows オブジェクトを介して Canvas キーボードイベントの監視と処理を実装します。
//キーイベント - ウィンドウをオブジェクトとして使用します
window.addEventListener('keydown', doKeyDown, true);

2: Canvas オブジェクトにキーボードイベントをサポートする他の DOM 要素を追加して、キーボードイベントサポートを実装します。 >

コードをコピーコードは次のとおりです:

// キーイベント - DOM 要素を object
canvas.addEventListener('keydown', doKeyDown,true);

ここで、tabindex は HTML5 DOM 要素であり、キーボードイベントをサポートします。
デモ、キーボードに従って上下左右に移動できる長方形のブロック:

完全なマウスとキーボードイベントのデモコードは次のとおりです: