HTML5 Canvas tetikus dan acara papan kekunci demo example_html5 kemahiran tutorial

Menunjukkan peristiwa tetikus Kanvas HTML5, mendapatkan koordinat tetikus pada objek Kanvas dan menunjukkan peristiwa papan kekunci untuk mengawal pergerakan objek pada Kanvas melalui papan kekunci.

Objek Canvas menyokong semua acara tetikus JavaScript, termasuk klik tetikus (MouseClick), tekan tetikus (Mouse Down), angkat tetikus (Mouse Up), gerakan tetikus (Mouse Move to Canvas). dua cara, satu cara ialah melengkapkannya melalui API:

Salin kod

Kodnya adalah seperti berikut:

// acara tetikus
canvas.addEventListener("mousedown",doMouseDown,false);
canvas.addEventListener('mousemove', doMouseMove,false(EventListenerd); 'mouseup ', doMouseUp, false);
Cara lain dipanggil anti-corak dalam JavaScript:

Salin kodKodnya adalah seperti berikut:

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

Dapatkan koordinat tetikus pada objek Canvas:
Sejak koordinat tetikus pada Canvas tidak boleh diperoleh secara langsung dalam acara tetikus pada Kanvas, jadi Apa yang diperoleh adalah berdasarkan koordinat keseluruhan skrin
. Oleh itu, kedudukan tetikus diperoleh melalui peristiwa tetikus e.pageX dan e.pageY, dan kemudian kedudukan relatif objek Canvas berbanding skrin diperoleh melalui
Canvas.getBoundingClientRect(), dan koordinat tetikus dalam Kanvas diperoleh dengan mengira

, kodnya adalah seperti berikut:

Salin kod kod adalah seperti berikut:

fungsi getPointOnCanvas(kanvas, x, y) {
var bbox =canvas.getBoundingClientRect(
kembali { x: x- bbox.left *(); canvas.width / bbox.width),
y:y - bbox.top * (canvas.height / bbox.height)
};


Acara papan kekunci:

HTML5 Canvas sendiri tidak menyokong pemantauan dan pemerolehan acara papan kekunci Terdapat dua kaedah yang biasa digunakan untuk menyelesaikan masalah ini:

1: Laksanakan pemantauan dan pemprosesan acara papan kekunci melalui objek tingkap
//. acara utama - gunakan tetingkap sebagai objek
window.addEventListener('keydown', doKeyDown, true

Dua: Laksanakan sokongan acara papan kekunci dengan menambahkan elemen DOM lain yang menyokong acara papan kekunci pada objek Kanvas

Salin kodKod tersebut adalah seperti berikut:

// acara utama - gunakan elemen DOM
canvas.addEventListener('keydown', doKeyDown,true); 🎜>

di mana tabindex ialah elemen DOM HTML5 dan menyokong acara papan kekunci.
Demo, blok segi empat tepat yang boleh bergerak ke atas, bawah, kiri dan kanan mengikut papan kekunci:

Kod demonstrasi acara tetikus dan papan kekunci yang lengkap adalah seperti berikut:




Salin kod

Kod tersebut adalah seperti berikut:

var tempContext = null; // konteks 2d pembolehubah global
var bermula = palsu;
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;
jika (!canvas.getContext) {
console.log("Kanvas tidak disokong. Sila pasang penyemak imbas yang serasi dengan HTML5.");
kembali;
}
// dapatkan konteks 2D kanvas dan lukis segi empat tepat
tempContext = canvas.getContext("2d");
tempContext.fillStyle="blue";
x = canvas.width/2;
y = canvas.height/2;
tempContext.fillRect(x, y, 80, 40);
// acara utama - gunakan elemen DOM sebagai objek
canvas.addEventListener('keydown', doKeyDown, true);
canvas.focus();
// acara utama - gunakan tetingkap sebagai objek
window.addEventListener('keydown', doKeyDown, true);
// acara tetikus
canvas.addEventListener("mousedown", doMouseDown, false);
canvas.addEventListener('mousemove', doMouseMove, false);
canvas.addEventListener('mouseup', doMouseUp, false);
}
fungsi getPointOnCanvas(kanvas, x, y) {
var bbox = canvas.getBoundingClientRect();
kembali { x: x - bbox.left * (canvas.width / bbox.width),
y: y - bbox.top * (canvas.height / bbox.height)
};
}
fungsi doKeyDown(e) {
var keyID = e.keyCode ? e.keyCode :e.which;
if(keyID === 38 || keyID === 87) { // anak panah atas dan W
clearCanvas();
y = y - 10;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
if(keyID === 39 || keyID === 68) { // anak panah kanan dan D
clearCanvas();
x = x 10;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
if(keyID === 40 || keyID === 83) { // anak panah ke bawah dan S
clearCanvas();
y = y 10;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
if(keyID === 37 || keyID === 65) { // anak panah kiri dan A
clearCanvas();
x = x - 10;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
}
function clearCanvas() {
tempContext.clearRect(0, 0, 500, 500)
}
function doMouseDown(event) {
var x = event.pageX;
var y = event.pageY;
var kanvas = acara.sasaran;
var loc = getPointOnCanvas(kanvas, x, y);
console.log("tetikus turun pada titik( x:" loc.x ", y:" loc.y ")");
tempContext.beginPath();
tempContext.moveTo(loc.x, loc.y);
mula = benar;
}
fungsi doMouseMove(event) {
var x = event.pageX;
var y = event.pageY;
var kanvas = acara.sasaran;
var loc = getPointOnCanvas(kanvas, x, y);
jika (bermula) {
tempContext.lineTo(loc.x, loc.y);
tempContext.stroke();
}
}
fungsi doMouseUp(event) {
console.log("mouse up now");
jika (bermula) {
doMouseMove(event);
dimulakan = palsu;
}
}

HTML部分：

复制代码

复制代码


任>
如下:

Demo Acara Kanvas HTML - Oleh Gloomy Fish

Tekan kekunci W, A, S, D untuk mengalih