Rumah > Artikel > hujung hadapan web > Di manakah kod javascript kanvas ditulis?
Di manakah kod javascript kanvas ditulis?
- PHPzasal
- 2023-04-25 09:14:11411semak imbas
Kanvas ialah ciri baharu HTML5, yang boleh digunakan untuk operasi lukisan melalui JavaScript. Jadi, di manakah kita harus menulis kod JavaScript berkaitan kanvas?
Secara umumnya, kod JavaScript berkaitan kanvas hendaklah ditulis dalam teg <script></script> fail HTML atau dirujuk dalam fail JavaScript yang berasingan. Ini boleh dicapai melalui langkah berikut:
- Buat fail HTML: Pertama, kita perlu mencipta fail HTML, yang boleh dibuat melalui editor teks atau IDE dan alatan lain. Kod khusus adalah seperti berikut:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>画布JavaScript代码示例</title> </head> <body> <canvas id="myCanvas"></canvas> <script src="js/canvas.js"></script> </body> </html>
Ini ialah fail HTML ringkas, yang mengandungi teg <canvas> dan teg <script>. Teg <canvas> digunakan untuk memaparkan kanvas, dan teg <script> digunakan untuk merujuk fail JavaScript.
- Cipta fail JavaScript: Dalam fail HTML di atas, kami telah merujuk fail JavaScript bernama
canvas.js. Oleh itu, kita perlu mencipta failcanvas.jsdalam projek dan menulis kod berkaitan kanvas di dalamnya. Contoh kod khusus adalah seperti berikut:
// 获取canvas元素
let canvas = document.getElementById('myCanvas');
// 获取canvas上下文
let ctx = canvas.getContext('2d');
// 绘制矩形
ctx.fillStyle = 'orange';
ctx.fillRect(10, 10, 100, 50);
// 绘制圆形
ctx.fillStyle = 'green';
ctx.beginPath();
ctx.arc(150, 35, 25, 0, 2 * Math.PI);
ctx.fill();
// 绘制文本
ctx.fillStyle = 'blue';
ctx.font = '20px Arial';
ctx.fillText('Hello World!', 200, 35);
Kod di atas digunakan untuk melukis segi empat tepat oren, bulatan hijau dan teks biru. Antaranya, kaedah getContext() digunakan untuk mendapatkan konteks kanvas, dan operasi lukisan boleh dilakukan melalui objek konteks.
- Rujuk fail JavaScript dalam fail HTML: Selepas dua langkah di atas selesai, kami perlu merujuk fail JavaScript yang ditulis dalam langkah 2 ke dalam fail HTML. Kod khusus adalah seperti berikut:
<script src="js/canvas.js"></script>
Selepas menambah kod di atas pada fail HTML, penyemak imbas boleh memuatkan dan melaksanakan kod JavaScript dalam fail canvas.js untuk merealisasikan fungsi lukisan kanvas .
Ringkasnya, untuk kod JavaScript yang berkaitan dengan kanvas, kami boleh merujuknya melalui teg <script> atau fail JavaScript yang berasingan untuk mencapai lukisan kanvas. Merujuk fail JavaScript dengan betul adalah salah satu kunci untuk memastikan operasi normal kod JavaScript.
Atas ialah kandungan terperinci Di manakah kod javascript kanvas ditulis?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!