Panduan komprehensif untuk menguasai teknologi JS kanvas

Dari pemula hingga mahir: Panduan teknikal Canvas JS

Pengenalan:
Kanvas ialah ciri penting dalam HTML5 yang boleh melukis grafik secara dinamik melalui JavaScript. Ia menyediakan fungsi lukisan yang berkuasa yang boleh digunakan untuk membuat carta, melukis graf dan memaparkan data. Artikel ini akan menggunakan contoh kod untuk membimbing pembaca secara beransur-ansur membiasakan diri dengan teknologi Canvas JS dari peringkat kemasukan untuk membantu anda meningkatkan keupayaan lukisan anda.

1. Penggunaan asas Kanvas
Kita perlu menambahkan elemen Kanvas pada fail HTML, kemudian menggunakan JavaScript untuk mendapatkan konteksnya. Berikut ialah contoh mudah:

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

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

Dengan kod di atas, kami mencipta kanvas dengan saiz 500x500 piksel dan mendapatkan konteks lukisannya. Lukiskan grafik asas 150.

Lukis bulatan

1. context.fillStyle = "red";
   context.fillRect(100, 100, 200, 150);

   Salin selepas log masuk

   Kod di atas melukis bulatan hijau dengan koordinat pusat (250, 250) dan jejari 100.

Lukis garis lurus

2. context.beginPath();
   context.arc(250, 250, 100, 0, Math.PI * 2, false);
   context.fillStyle = "green";
   context.fill();

   Salin selepas log masuk

   Kod di atas melukis garis lurus dengan koordinat titik permulaan sebagai (100, 100), koordinat titik akhir sebagai (300, 300), lebar garis ialah 5, dan warna adalah biru.

3. Lukis carta

3. Lukis carta palang

   context.beginPath();
   context.moveTo(100, 100);
   context.lineTo(300, 300);
   context.lineWidth = 5;
   context.strokeStyle = "blue";
   context.stroke();

   Salin selepas log masuk
Kod di atas melukis carta bar yang mudah. Tatasusunan data menyimpan ketinggian setiap lajur, dan tatasusunan warna menyimpan warna setiap lajur. Lintas tatasusunan data melalui gelung for dan lukis setiap lajur secara bergilir-gilir.

1. var data = [30, 50, 70, 90];
   var colors = ["red", "green", "blue", "yellow"];
   
   // 绘制坐标系
   context.beginPath();
   context.moveTo(50, 50);
   context.lineTo(50, 350);
   context.lineTo(450, 350);
   context.stroke();
   
   for (var i = 0; i < data.length; i++) {
     var barHeight = data[i];
     var barX = 60 + i * 80;
     var barY = 350 - barHeight;
   
     // 绘制柱状图
     context.fillStyle = colors[i];
     context.fillRect(barX, barY, 50, barHeight);
   }

   Salin selepas log masuk
   Kod di atas melukis carta pai. Tatasusunan data menyimpan saiz setiap sektor, dan tatasusunan warna menyimpan warna sektor. Kira sudut permulaan dan sudut penamat setiap sektor melalui gelung, dan gunakan kaedah lengkok untuk melukis sektor.

   Kesimpulan:

   Artikel ini memperkenalkan penggunaan asas teknologi Canvas JS dan proses melukis carta melalui contoh kod. Kanvas menyediakan pelbagai fungsi lukisan, yang boleh digunakan daripada lukisan grafik ringkas kepada paparan carta yang kompleks. Saya harap artikel ini dapat membantu pembaca mendalami pemahaman mereka tentang teknologi Canvas JS, mengaplikasikannya dalam projek sebenar dan meningkatkan kebolehan lukisan mereka.

   Atas ialah kandungan terperinci Panduan komprehensif untuk menguasai teknologi JS kanvas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!