Kuasai pengetahuan asas kanvas: semua yang anda perlu ketahui

Canvas ialah teg baharu dalam HTML5 yang menyediakan cara untuk melukis melalui JavaScript. Dengan menggunakan Kanvas, kami boleh melukis grafik, mencipta animasi, memproses imej dan mencapai kesan interaktif pada halaman web. Artikel ini akan memperkenalkan pengetahuan asas Kanvas, termasuk cara mencipta elemen Kanvas, melukis bentuk dan laluan asas, melukis teks, menggunakan imej, dsb., dan menyediakan contoh kod terperinci.

1. Buat Elemen Kanvas
   Untuk menggunakan Kanvas dalam halaman web, anda perlu mencipta elemen Kanvas terlebih dahulu. Elemen Kanvas boleh dibuat menggunakan kod HTML seperti yang ditunjukkan di bawah:

   <canvas id="myCanvas" width="500" height="500"></canvas>

   Dalam kod di atas, kami telah mencipta elemen Kanvas dengan id "myCanvas" dengan lebar dan ketinggian 500 piksel. Saiz dan kedudukannya boleh ditetapkan melalui CSS.

2. Dapatkan konteks lukisan
   Selepas mencipta elemen Kanvas, kita perlu mendapatkan konteks lukisan sebelum kita boleh melakukan operasi lukisan. Elemen Canvas menyediakan kaedah getContext() untuk mendapatkan konteks lukisan, seperti yang ditunjukkan di bawah:

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

   Dalam kod di atas, mula-mula gunakan kaedah getElementById() untuk mendapatkan elemen Kanvas dengan id "myCanvas", dan kemudian gunakan getContext ("2d") kaedah memperoleh konteks lukisan 2D. Kanvas juga menyokong webgl, webgl2 dan konteks lukisan lain Di sini kami memperkenalkan lukisan 2D.

3. Lukis bentuk dan laluan asas
   Kanvas menyediakan beberapa kaedah untuk melukis bentuk dan laluan asas, seperti segi empat tepat, bulatan, garisan, dsb. Berikut ialah beberapa kaedah yang biasa digunakan dan kod sampelnya:

• Melukis segi empat tepat:

  ctx.fillStyle = "red"; // 设置填充颜色
  ctx.fillRect(50, 50, 100, 100); // 绘制矩形

  Dalam kod di atas, kami mula-mula menggunakan sifat fillStyle untuk menetapkan warna isian kepada merah, dan kemudian gunakan kaedah fillRect() untuk melukis segi empat tepat dengan koordinat sudut kiri atas ( 50, 50), segi empat tepat dengan lebar dan ketinggian 100 piksel.

• Melukis bulatan:

  ctx.beginPath(); // 开始绘制路径
  ctx.arc(100, 100, 50, 0, 2 * Math.PI); // 绘制圆
  ctx.fillStyle = "blue";
  ctx.fill(); // 填充路径

  Dalam kod di atas, kita mula-mula menggunakan kaedah beginPath() untuk mula melukis laluan, dan kemudian gunakan kaedah arc() untuk melukis bulatan dengan koordinat pusat (100, 100) dan jejari 50 piksel Bulatan dengan kedua-dua sudut dan sudut hujung sama dengan 0. Kemudian gunakan atribut fillStyle untuk menetapkan warna isian kepada biru, dan akhirnya gunakan kaedah fill() untuk mengisi laluan.

• Lukis garis lurus:

  ctx.moveTo(100, 200); // 将画笔移动到坐标(100, 200)
  ctx.lineTo(200, 200); // 绘制直线到坐标(200, 200)
  ctx.strokeStyle = "green"; // 设置描边颜色
  ctx.stroke(); // 描边路径

  Dalam kod di atas, kita mula-mula menggunakan kaedah moveTo() untuk menggerakkan berus ke koordinat (100, 200), dan kemudian gunakan kaedah lineTo() untuk melukis garis lurus kepada koordinat (200, 200). Kemudian gunakan sifat strokeStyle untuk menetapkan warna strok kepada hijau, dan akhirnya gunakan kaedah stroke() untuk stroke laluan.

4. Lukis teks
   Kanvas menyediakan beberapa kaedah untuk melukis teks, seperti fillText(), strokeText(), dsb. Berikut ialah contoh kod untuk melukis teks:

ctx.font = "30px Arial"; // 设置字体样式
ctx.fillStyle = "black"; // 设置填充颜色
ctx.fillText("Hello Canvas!", 100, 100); // 绘制填充文本
ctx.strokeStyle = "red"; // 设置描边颜色
ctx.strokeText("Hello Canvas!", 100, 100); // 绘制描边文本

Dalam kod di atas, kami mula-mula menggunakan atribut fon untuk menetapkan gaya fon, kemudian gunakan atribut fillStyle untuk menetapkan warna isian kepada hitam, dan panggil fillText() kaedah untuk melukis teks yang diisi. Kemudian gunakan sifat strokeStyle untuk menetapkan warna strok kepada merah, dan panggil kaedah strokeText() untuk melukis teks strok.

5. Menggunakan imej
   Kanvas boleh menggunakan imej untuk melukis dan objek imej boleh digunakan untuk memuatkan imej. Berikut ialah contoh kod yang menggunakan imej:

var img = new Image(); // 创建Image对象
img.src = "image.jpg"; // 设置图像路径
img.addEventListener("load", function() {
  ctx.drawImage(img, 0, 0); // 绘制图像
});

Dalam kod di atas, mula-mula buat objek Imej, kemudian gunakan atribut src untuk menetapkan laluan imej. Dalam acara pemuatan, panggil kaedah drawImage() untuk melukis imej, dengan parameternya ialah objek Imej dan koordinat sudut kiri atas (0, 0).

Di atas adalah pengetahuan asas tentang Kanvas dan contoh kod. Dengan mempelajari pengetahuan asas ini, ia boleh membantu anda memahami dan menggunakan Kanvas untuk operasi lukisan. Semoga artikel ini dapat membantu anda!

Atas ialah kandungan terperinci Kuasai pengetahuan asas kanvas: semua yang anda perlu ketahui. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!