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

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 要素であり、キーボード イベントをサポートします。
デモ、キーボードに従って上下左右に移動できる長方形のブロック:

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

コードをコピーします

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

var tempContext = null; // グローバル変数 2D コンテキスト
var starting = false;
var mText_canvas = null;
var x = 0、y =0;
window.add
window.onload = function() {
var Canvas = document.getElementById("event_canvas");
console.log(canvas.parentNode.clientWidth);
canvas.width = Canvas.parentNode.clientWidth;
canvas.height = Canvas.parentNode.clientHeight;
if (!canvas.getContext) {
console.log("キャンバスはサポートされていません。HTML5 互換のブラウザをインストールしてください。");
戻る;
}
// キャンバスの 2D コンテキストを取得し、長方形を描画します
tempContext = Canvas.getContext("2d");
tempContext.fillStyle="blue";
x = Canvas.width/2;
y = キャンバス.高さ/2;
tempContext.fillRect(x, y, 80, 40);
// キーイベント - DOM 要素をオブジェクトとして使用します
canvas.addEventListener('keydown', doKeyDown, true);
canvas.focus();
// キーイベント - ウィンドウをオブジェクトとして使用します
window.addEventListener('keydown', doKeyDown, true);
// マウスイベント
canvas.addEventListener("mousedown", doMouseDown, false);
canvas.addEventListener('mousemove', doMouseMove, false);
canvas.addEventListener('mouseup', doMouseUp, false);
}
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)
};
}
function doKeyDown(e) {
var keyID = e.keyCode ? e.keyCode :e.that;
if(keyID === 38 || keyID === 87) { // 上矢印と W
clearCanvas();
y = y - 10;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
if(keyID === 39 || keyID === 68) { // 右矢印と D
clearCanvas();
x = x 10;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
if(keyID === 40 || keyID === 83) { // 下矢印と S
clearCanvas();
y = y 10;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
if(keyID === 37 || keyID === 65) { // 左矢印と A
clearCanvas();
x = x - 10;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
}
関数 clearCanvas() {
tempContext.clearRect(0, 0, 500, 500)
}
関数 doMouseDown(event) {
var x =イベント.ページX;
var y = イベント.pageY;
var Canvas = イベント.ターゲット;
var loc = getPointOnCanvas(canvas, x, y);
console.log("マウスをポイント(x:" loc.x ", y:" loc.y ")"で押した");
tempContext.beginPath();
tempContext.moveTo(loc.x, loc.y);
開始 = true;
}
function doMouseMove(event) {
var x =event.pageX;
var y = イベント.pageY;
var Canvas = イベント.ターゲット;
var loc = getPointOnCanvas(canvas, x, y);
if (開始済み) {
tempContext.lineTo(loc.x, loc.y);
tempContext.ストローク();
}
}
function doMouseUp(event) {
console.log("今マウスアップ");
if (開始) {
doMouseMove(event);
開始 = false;
}
}

HTML 部分：

复制代

代以下のように:

HTML キャンバス イベント デモ - Gloomy Fish 作

W、A、S、D キーを押して 

に移動します。

このウェブサイトの声明

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