Apakah perkara utama pembelajaran kanvas?-html tutorial-php.cn

Apakah perkara utama pembelajaran kanvas?

PHPz

Lepaskan： 2024-01-17 08:25:05

asal

784 orang telah melayarinya

Apakah perkara utama pembelajaran kanvas?

Apakah elemen utama untuk mempelajari kanvas dengan baik? , memerlukan contoh kod khusus

Kanvas ialah ciri penting dalam HTML5 Ia boleh mencapai pelbagai kesan lukisan yang menarik dan juga boleh digunakan sebagai asas untuk pembangunan permainan. Walau bagaimanapun, pembelajaran Kanvas dengan baik memerlukan penguasaan beberapa elemen utama ini dan contoh kod khusus akan diperkenalkan di bawah.

1. Konsep asas dan penggunaan Kanvas

Kanvas ialah elemen HTML yang mencipta kanvas dalam halaman web Anda boleh melukis pelbagai bentuk, teks, gambar, dll. pada kanvas. Kanvas mempunyai dua mod: 2D dan 3D Di sini kita bercakap tentang mod 2D.

Untuk menggunakan Canvas, anda perlu mencipta elemen Canvas dalam halaman HTML terlebih dahulu. Kodnya adalah seperti berikut:

<canvas id="myCanvas" width="800" height="600"></canvas>

Salin selepas log masuk

Dalam kod di atas, atribut id "myCanvas" bermaksud bahawa ini ialah elemen Kanvas dengan ID "myCanvas", dan atribut lebar dan tinggi masing-masing mewakili lebar dan tinggi kanvas.

Anda boleh mendapatkan elemen Kanvas dan melakukan operasi lukisan melalui kod JavaScript. Kodnya adalah seperti berikut:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

Salin selepas log masuk

Barisan pertama kod mendapat elemen Kanvas, dan baris kedua kod mendapat konteks pemaparan (konteks) Mod 2D (ditulis sebagai "2d") digunakan di sini atribut dan kaedah ialah:

fillStyle: Warna isian
strokeStyle: Stroke color
lineWidth: Lebar garisan
beginPath: Mulakan laluan baharu
closePath

Berikut ialah contoh mudah kod untuk melukis segi empat tepat:

ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);

Salin selepas log masuk

Dalam kod di atas, atribut fillStyle ditetapkan Warna isian ialah "merah", dan kaedah fillRect digunakan untuk melukis segi empat tepat Dua parameter pertama ialah koordinat sudut kiri atas , dan dua parameter terakhir ialah lebar dan tinggi segi empat tepat.

2. Transformasi grafik Kanvas

Dalam Kanvas, grafik boleh diubah seperti terjemahan, putaran, penskalaan, dll. Transformasi ini boleh dicapai melalui kaedah transformasi. Parameter kaedah transformasi ialah matriks transformasi Hanya kaedah transformasi biasa diperkenalkan di sini.

Transformasi terjemahan boleh dilaksanakan melalui kaedah terjemah Contoh kod adalah seperti berikut:

ctx.translate(100, 100);
ctx.fillRect(0, 0, 100, 100);

Salin selepas log masuk

Dalam kod di atas, kaedah terjemah menggerakkan asal lukisan, jadi kedudukan segi empat tepat dialihkan ke. sudut kanan bawah sebanyak 100 piksel.

Transformasi putaran boleh dilaksanakan melalui kaedah putaran Contoh kod adalah seperti berikut:

ctx.translate(100, 100);
ctx.rotate(Math.PI / 4); // 旋转45度
ctx.fillRect(0, 0, 100, 100);

Salin selepas log masuk

Dalam kod di atas, transformasi putaran menggunakan kaedah putaran . Di sini ia diputar 45 darjah (iaitu, π/ 4 radian). Ambil perhatian bahawa penjelmaan putaran mesti dilakukan selepas penjelmaan terjemahan, jika tidak, pusat putaran akan diimbangi. . lebar dan tinggi diperbesarkan sebanyak 2 kali ganda. Ambil perhatian bahawa transformasi penskalaan juga mesti dilakukan selepas transformasi terjemahan.

3. Pemprosesan acara kanvas

Kanvas boleh bertindak balas kepada pelbagai acara, seperti klik tetikus, pergerakan tetikus, kekunci papan kekunci, dsb. Peristiwa ini terikat melalui kaedah addEventListener Contoh kod adalah seperti berikut:

ctx.translate(50, 50);
ctx.scale(2, 2); // 宽度和高度都放大了2倍
ctx.fillRect(0, 0, 50, 50);

Salin selepas log masuk

Dalam kod di atas, kaedah addEventListener mengikat acara turun tetikus, koordinat tetikus berbanding sudut kiri atas elemen Kanvas dicetak (elemen Kanvas perlu ditolak) koordinat sudut kiri atas).

4. Kesan animasi kanvas

Kanvas boleh mencapai pelbagai kesan animasi, seperti pergerakan, penskalaan, putaran, dll., yang perlu dicapai menggunakan kaedah requestAnimationFrame.

Kaedah requestAnimationFrame boleh memanggil fungsi yang ditentukan sebelum penyemak imbas melukis semula kali seterusnya, yang boleh menjadikan kesan animasi lebih lancar. Kaedah requestAnimationFrame mempunyai parameter fungsi panggil balik, yang akan dipanggil semasa lukisan semula seterusnya dan kesan animasi boleh dilaksanakan dalam fungsi panggil balik ini.

Contoh kod adalah seperti berikut:

canvas.addEventListener("mousedown", function (e) {
  var x = e.clientX - canvas.getBoundingClientRect().left;
  var y = e.clientY - canvas.getBoundingClientRect().top;
  console.log("x:" + x + ", y:" + y);
});

Salin selepas log masuk

Dalam kod di atas, fungsi cabutan dipanggil dalam setiap bingkai, dan kesan animasi segi empat tepat bergerak dilaksanakan dalam fungsi ini.

Ringkasan

Untuk mempelajari Kanvas dengan baik, anda perlu menguasai konsep asas dan penggunaan Kanvas, transformasi grafik, pemprosesan acara, kesan animasi dan elemen penting lain. Artikel ini memperkenalkan elemen ini dan menyediakan contoh kod khusus, dengan harapan dapat membantu anda mempelajari Kanvas dengan baik.

Atas ialah kandungan terperinci Apakah perkara utama pembelajaran kanvas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!