Gambaran keseluruhan atribut biasa teg kanvas HTML5

Teg Kanvas ialah elemen penting dalam HTML5, yang menyediakan cara untuk melukis grafik melalui JavaScript. Dalam artikel ini, kami akan memperkenalkan anda kepada sifat yang biasa digunakan bagi teg Kanvas dan menunjukkan penggunaannya melalui contoh kod tertentu.

1. Senarai atribut biasa

1. lebar: Tetapkan lebar Kanvas. Lebar boleh ditetapkan menggunakan nilai piksel tertentu atau menggunakan unit relatif seperti peratusan.
2. tinggi: Tetapkan ketinggian Kanvas. Ketinggian juga boleh ditetapkan menggunakan nilai piksel atau unit relatif.
3. id: Tentukan ID unik untuk teg Kanvas supaya ia boleh dimanipulasi melalui JavaScript.
4. kelas: Tentukan nama kelas untuk teg Kanvas untuk memudahkan kawalan gaya.
5. gaya: digunakan untuk menetapkan gaya label Kanvas, termasuk warna latar belakang, gaya sempadan, dsb.
6. getContext(): Ini ialah kaedah yang sangat penting yang digunakan untuk mendapatkan konteks objek Canvas. Lukisan, gaya tetapan dan operasi lain boleh dilakukan melalui konteks.

Berikut ialah contoh kod teg Kanvas asas:

<canvas id="myCanvas" width="500" height="300" style="border:1px solid black;"></canvas>

Dalam contoh ini, kami mencipta teg Kanvas dengan lebar 500 piksel dan ketinggian 300 piksel, serta menetapkan sempadan hitam. . kaedah boleh melukis garis lurus. Kod contoh berikut melukis garis lurus dari koordinat (50, 50) ke koordinat (200, 200).

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 200);
ctx.stroke();

Lukis segi empat tepat: Gunakan kaedah context.fillRect() untuk melukis segi empat tepat. Kod contoh di bawah melukis segi empat tepat merah dengan lebar 100 piksel dan ketinggian 50 piksel.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 50);

Lukis bulatan: Gunakan kaedah context.arc() untuk melukis bulatan. Kod contoh di bawah melukis bulatan biru dengan jejari 30 piksel.
1. context.lineTo()方法可以绘制一条直线。下面的示例代码绘制了一条从坐标(50, 50)到坐标(200, 200)的直线。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, 30, 0, 2 * Math.PI);
ctx.fillStyle = "blue";
ctx.fill();

2. 绘制矩形：使用context.fillRect()方法可以绘制一个矩形。下面的示例代码绘制了一个宽度为100像素，高度为50像素的红色矩形。

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

function drawCircle() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  var x = Math.random() * canvas.width;
  var y = Math.random() * canvas.height;
  var color = "#"+((1<<24)*Math.random()|0).toString(16);
  ctx.beginPath();
  ctx.arc(x, y, 30, 0, 2 * Math.PI);
  ctx.fillStyle = color;
  ctx.fill();
}

setInterval(drawCircle, 1000);

3. 绘制圆形：使用context.arc()方法可以绘制一个圆形。下面的示例代码绘制了一个半径为30像素的蓝色圆形。
rrreee
4. 清空画布：使用context.clearRect()方法可以清空画布，实现动态绘制效果。下面的示例代码每隔一秒清空画布，并绘制一个随机位置和颜色的圆形。
rrreee

上面的示例代码使用setInterval()函数每隔一秒调用一次drawCircle()rrreee

Kosongkan kanvas: Gunakan kaedah context.clearRect() untuk mengosongkan kanvas dan mencapai kesan lukisan dinamik. Kod contoh berikut mengosongkan kanvas setiap saat dan melukis bulatan dalam kedudukan dan warna rawak.
rrreee🎜Kod sampel di atas menggunakan fungsi setInterval() untuk memanggil fungsi drawCircle() setiap saat untuk mengosongkan kanvas dan melukis bulatan baharu secara berterusan. 🎜🎜Melalui contoh kod di atas, kita dapat melihat penggunaan beberapa sifat biasa teg Kanvas dan cara menggunakan JavaScript untuk melukis grafik. Saya harap artikel ini akan membantu anda memahami penggunaan teg Kanvas. 🎜

Atas ialah kandungan terperinci Gambaran keseluruhan atribut biasa teg kanvas HTML5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!