Artikel ini memperkenalkan kode contoh untuk menggambar diagram lingkaran secara dinamis menggunakan kanvas html5 dan membagikannya kepada semua orang. Detailnya adalah sebagai berikut:
Mari kita lihat renderingnya terlebih dahulu
Ini tidak mengacu pada perpustakaan pihak ketiga seperti jquery, tetapi ditulis menggunakan operasi DOM dan fitur kanvas.
Lingkaran gambar kanvas umumnya dibagi menjadi lingkaran padat dan lingkaran berongga.
Berdasarkan analisis permintaan, kita mengetahui bahwa lingkaran adalah lingkaran padat.
1. Pertama gunakan kanvas untuk menggambar lingkaran padat
//Pseudocode var canvas = document.createElement(canvas);var ctx = canvas.getContext('2d');ctx.beginPath();ctx.arc(koordinat sumbu x pusat lingkaran, koordinat sumbu y pusat lingkaran, radius , sudut awal, sudut akhir);ctx.fillStyle = 'hijau';ctx.closePath();ctx.fill();2. Gambarlah diagram lingkaran berdasarkan warna yang berbeda
//Pseudocode var canvas = document.createElement(canvas);var ctx = canvas.getContext('2d');ctx.beginPath();ctx.arc(koordinat sumbu x tengah, koordinat sumbu y tengah, radius, hijau pojok awal, pojok ujung hijau);ctx.fillStyle = 'hijau';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(pusat koordinat sumbu x, koordinat pusat sumbu y, radius, sudut awal merah, sudut akhir merah);ctx .isiGaya = 'merah';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(koordinat sumbu x pusat lingkaran, koordinat sumbu y pusat lingkaran, jari-jari, sudut awal kuning, sudut akhir kuning) ;ctx.fillStyle = 'kuning';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(koordinat sumbu x pusat lingkaran, koordinat sumbu y pusat lingkaran, jari-jari, sudut awal ungu, sudut akhir ungu) ;ctx.fillStyle = 'ungu';ctx.closePath();ctx.fill();3. Menggambar diagram lingkaran secara dinamis
Tiga metode umumnya direkomendasikan di situs web menggambar lingkaran dinamis: requestAnimationFrame, setInterval (timing), dan perhitungan sudut dinamis.
Disini saya menggunakan metode requestAnimationFrame yang pertama.
Pada proses penulisan saya menemukan permasalahan yaitu pada saat menggambar lingkaran secara dinamis tidak digambar berdasarkan koordinat pusat lingkaran. Untuk mengatasi masalah ini, Anda perlu mendefinisikan ulang koordinat kuas kanvas sebagai koordinat pusat lingkaran asli setiap kali Anda menggambar lingkaran.
<!DOCTYPE html><html><head> <meta charset=utf-8> <title></title> <style> #graph {/* batas: 1 piksel hitam pekat; ukuran kotak: kotak perbatasan;*/ } </style></head><body><div id=circle style=width: 500px;float: kiri;></div></body></html><script type=text/javascript>(function(window,undefinisi){ var data = [ {produk: produk 1, penjualan: [192.44, 210.54, 220.84, 230.11.220.85.210.59.205.49.200.55.195.71 ,187,46 ,180,66 ,170,90]}, {produk:produk2,penjualan:[122,41 ,133,16 ,145,65 ,158,00 ,164,84 ,178,62 ,185,70 ,190,13 ,195,53 ,198,88 ,204,32 ,210,91]}, {produk:produk 3,penjualan:[170,30 ,175,00 ,170,79 ,165,10 ,165,62 ,160,92 ,155,92 ,145,77 ,145,17 ,140,27 ,135,99 ,130.33]}, {produk:produk 4,penjualan:[165.64,170.15,175.10,185.32,190.90,190.01,187.05,183.74,177.24,181.90,179.54,175.98]}] var dom_circle = document.getElementById('circle'); if(dom_circle != tidak terdefinisi && dom_circle != null) { var canvas = document.createElement(canvas); 2d'); var defaultStyle = fungsi(Dom,kanvas){ if(Dom.clientWidth <= 300) { kanvas.lebar = 300; Dom.style.overflowX = otomatis; } else{ kanvas.lebar = Dom.clientWidth; 300; Dom.style.overflowY = otomatis; } else { kanvas.tinggi = Dom.clientHeight } //Area sumbu koordinat//Perhatikan bahwa area diagram garis sebenarnya sedikit lebih kecil dari return ini { p1:'green', p2:'red', p3:' yellow', p4:'purple', x: 0 , / /Koordinat kiri sumbu koordinat pada kanvas y: 0, //Koordinat atas sumbu koordinat pada kanvas maxX: canvas.width, //Koordinat kanan sumbu koordinat pada kanvas maxY: canvas.height , //Koordinat bawah sumbu koordinat pada kanvas r:(canvas.width)/2, //Titik awal ry:(canvas.height)/2, //Titik awal cr: (canvas.width)/4, //Radius startAngle :-(1/2*Math.PI), //Sudut awal endAngle:(-(1/2*Math.PI)+2*Math.PI), //Sudut akhir xAngle:1*( Matematika.PI/ 180) //Offset}; } //Gambarlah sebuah lingkaran var tmpAngle = -(1/2*Math.PI); ['penjualan'][1]+data[0]['penjualan'][2]+data[0]['penjualan'][3] var persen1 = data[0]['penjualan'][0] / jumlah* Matematika.PI * 2; var persen2 = data[0]['penjualan'][1]/jumlah * Matematika.PI * 2 + var persen1 = data[0]['penjualan'][2]/jumlah * Math.PI * 2 + persen2; var persen4 = data[0]['penjualan'][3]/jumlah * Math.PI * 2 + persen3; console.log(percent1); konsol.log(persen3); konsol.log(persen4); var tmpSum = 0; var drawCircle = fungsi(){ if(tmpAngle >= ds.endAngle) { return false; endAngle) { tmpAngle = ds.endAngle; } lain{ tmpAngle += ds.xAngle; tmpSum += ds.xAngle } // konsol.log(ds.startAngle+'***'+tmpAngle); // konsol.log(tmpSum); y,kanvas.lebar,kanvas.tinggi); if(tmpSum > persen1 && tmpSum <persen2) { ctx.beginPath(); ctx.moveTo(ds.r,ds.ry); ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle+persen1,tmpAngle); p2; } lain jika(tmpSum > persen2 && tmpSum <persen3) { ctx.beginPath(); ctx.moveTo(ds.r,ds.ry); ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle+persen2,tmpAngle); p3; } lain jika(tmpSum > persen3 ) { ctx.beginPath(); ctx.moveTo(ds.r,ds.ry); ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle+percent3,tmpAngle); ctx.fillStyle = ds.p4; .beginPath(); ctx.moveTo(ds.r,ds.ry); ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle,tmpAngle); ctx.fillStyle = ds.p1; } ctx.closePath(); this.toDraw = fungsi(){ ds= defaultStyle(dom_circle,kanvas); console.log(tmpAngle); // console.log(ds.xAngle) ctx.clearRect(ds.x,ds.y,canvas.width,canvas.height); mandiri = ini; jendela.onresize = fungsi(){ self.toDraw() } }})(jendela </skrip>Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.