Sebelum kita mulai, kita perlu mengetahui bagaimana kanvas menggambar gambar. Elemen kanvas digunakan untuk menggambar grafik di halaman web. Elemen kanvas HTML5 menggunakan JavaScript untuk menggambar gambar 2D di halaman web. Di kanvas area persegi panjang, kendalikan setiap piksel, dan gunakan JavaScript untuk menggambar grafik 2D dan merendernya piksel demi piksel. Ada banyak cara menggunakan elemen kanvas untuk menggambar jalur, persegi panjang, lingkaran, karakter, dan menambahkan gambar.
* Melihat! ! ! Tag Canvas sendiri tidak memiliki fungsi menggambar dan hanya dapat menggunakan JavaScript untuk menggambar gambar pada halaman web.
Rendernya adalah sebagai berikut:
1. Inisialisasi kode js
//Inisialisasi(fungsi(){ var canvas = document.createElement('canvas'); document.body.appendChild(canvas); canvas.height = mH; canvas.width = mW; mCtx = canvas.getContext('2d' ); drawPolygon(mCtx); // Menggambar tepi poligon drawLines(mCtx); //Garis simpul drawText(mCtx); Menggambar teks drawRegion(mCtx); // Menggambar data drawCircle(mCtx); // Menggambar titik data})();Pada kode di atas, semua pengaturan diinisialisasi melalui fungsi eksekusi langsung. Untuk cara menggambar segi enam beraturan di atas kanvas, silakan lihat Menggambar Segi Enam Biasa di atas Kanvas
Dalam diagram laba-laba, kita dapat membaginya dan menggambar segi enam, garis lurus, dan lingkaran menjadi komponen-komponen individual yang lengkap, lalu memanggil dan menggambarnya secara seragam melalui metode.
Kode sumbernya ditunjukkan di bawah ini:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Kanvas diagram laba-laba</title> <style type=text/css> kanvas{ } </style></head ><tubuh><tipe skrip=teks/javascript> var mW = 400; var mH = 400; var mData = [['Mana', 77],['Pertahanan', 72],['Kesehatan', 46],['Kerusakan fisik', 50],['Nilai pemulihan', 80],['Ketahanan', 60]]; var mCenter = mW /2; //Titik tengah var mRadius = mCenter - 100; //Radius (nilai yang dikurangi digunakan untuk memberi ruang pada teks yang digambar) var mAngle = Math.PI * 2 / mCount; //Sudut var mCtx = null; var mColorPolygon = '#B8B8B8'; //Warna poligon var mColorLines = '#B8B8B8'; //Warna sambungan titik var mColorText = '#000000'; //Inisialisasi(fungsi( ) { var kanvas = dokumen.createElement('kanvas'); dokumen.body.appendChild(kanvas); kanvas.tinggi = mH; kanvas.lebar = mW; mCtx = kanvas.getContext('2d'); drawCircle(mCtx }) (); // Menggambar fungsi tepi poligon drawPolygon(ctx){ ctx.save(); // simpan keadaan default ctx.strokeStyle = mColorPolygon; var r = mRadius/ mCount; //Unit radius//Gambar 6 lingkaran untuk(var i = 0; i < mCount; i ++) { ctx.beginPath(); //Jalur awal var currR = r * ( i + 1); //Radius saat ini //Gambar 6 sisi untuk(var j = 0; j < mCount; j ++) { var x = mCenter + currR * Math.cos(mAngle * j); var y = mCenter + currR * Math.sin(mAngle * j); :' + y); ctx.lineTo(x, y); } ctx.closePath(); //Jalur tertutup ctx.stroke(); ctx.restore(); // mengembalikan ke keadaan default } //Fungsi koneksi vertex drawLines(ctx){ ctx.save(); < mHitungan; i ++){ var x = mCenter + mRadius * Math.cos(mAngle * i); mRadius * Math.sin(mAngle * i); ctx.moveTo(mCenter, mCenter); ctx.lineTo(x, y); ctx.stroke(); ctx){ ctx.save(); var fontSize = mCenter / 12; Microsoft Yahei'; ctx.fillStyle = mColorText; for(var i = 0; i < mCount; i ++){ var x = mCenter + mRadius * Math.cos(mAngle * i); .sin(mAngle * i); jika( mAngle * i >= 0 && mAngle * i <= Matematika.PI / 2 ){ ctx.fillText(mData[i][0], x, y + fontSize); }else if(mAngle * i > Math.PI / 2 && mAngle * i <= Math.PI){ ctx.fillText(mData[i ][0], x - ctx.measureText(mData[i][0]).width, y + fontSize); if(mAngle * i > Math.PI && mAngle * i <= Math.PI * 3 / 2){ ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]) .lebar, y); }lainnya{ ctx.fillText(mData[i][0], x, y); } //Gambar fungsi wilayah data drawRegion(ctx){ ctx.save(); ctx.beginPath(); for(var i = 0; i < mCount; i ++){ var x = mCenter + mRadius * Math.cos (mAngle * i) * mData[i][1] / 100; var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100; ctx.lineTo(x, y); } ctx.closePath(); ctx.fillStyle = 'rgba(255, 0, 0, 0,5)'; ctx.restore(); } //Fungsi titik gambar drawCircle(ctx){ ctx.save(); / 18; untuk(var i = 0; i < mCount; i ++){ var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100; mRadius * Matematika.sin(mAngle * i) * mData[i][1] / 100; ctx.arc(x, y, r, 0, Matematika.PI * 2); ctx.fillStyle = 'rgba(255, 0, 0, 0.8)'; </skrip></tubuh></html>Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.