rendering akhir1. Definisikan variabel
Tentukan radius, tentukan ketebalan cincin, tentukan posisi tengah lingkaran, dan tentukan warna isian default
misalkan radius = 75biarkan ketebalan= 10biarkan innerRadius = radius - ketebalanlet x = 75biarkan y = 75var canvas = document.getElementById('tutorial');var ctx = canvas.getContext('2d');ctx.fillStyle = #f2d7d7;2. Gambarlah busur pertama
ctx.beginPath();ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI)
Perhatikan metodebeginPath(), langkah pertama dalam menghasilkan jalur. Pada dasarnya, sebuah jalur terdiri dari banyak sub-jalur, yang semuanya ada dalam sebuah daftar, dan semua sub-jalur (garis, busur, dll.) membentuk suatu bentuk. Setiap kali metode ini dipanggil, daftar akan dihapus dan disetel ulang, lalu kita dapat menggambar ulang grafik baru.
Dengan kata lain, metode ini dapat digunakan untuk mengelompokkan gambar Canvas dan menggambar grafik baru. Jika metode ini tidak dipanggil, maka grafik baru tersebut akan dihubungkan dengan grafik sebelumnya.
3. Gambarkan sambungan pertamactx.quadraticCurveTo((x - innerRadius) - ketebalan / 2, y - ketebalan, x - innerRadius, y)
Koneksi digambar menggunakan kurva Bezier kuadrat. Metode quadraticCurveTo(cp1x, cp1y, x, y) dari Canvas menerima 4 parameter. Parameter pertama dan kedua adalah titik kontrol, dan parameter ketiga dan keempat adalah ujungnya dokumen resmi
Cari tahu saja titik kontrol dan titik akhir untuk menggambar busur
4. Gambarlah busur keduactx.arc(x, y, innerRadius, Math.PI, Math.PI * 1.5, benar)
Perhatikan parameter terakhir setelah metode, atur ke true yang berarti menggambar berlawanan arah jarum jam (defaultnya searah jarum jam)
5. Gambarlah sambungan keduactx.quadraticCurveTo(y - ketebalan, (x - innerRadius) - ketebalan / 2, x, y - innerRadius - ketebalan)
Langkah ini sebenarnya tidak jauh berbeda dengan langkah ketiga, kita cukup mengubah posisi parameter saja.
6. Mengisictx.isi();
Pada titik ini, sebuah cincin sederhana yang tidak tertutup telah selesai
Gambarlah cincin bilah kemajuan kedua
7. Inisialisasictx.beginPath();ctx.fillStyle = #e87c7c;
BeginPath artinya menggambar grafik baru. Jika cara ini tidak dipanggil, maka grafik yang digambar nanti akan dihubungkan dengan grafik yang digambar sebelumnya.
8. Gambarlah cincin bilah kemajuan keduactx.beginPath();ctx.fillStyle = #e87c7c;ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI * 2)ctx.quadraticCurveTo((x + innerRadius) + ketebalan / 2, y + ketebalan, x + innerRadius, y)ctx.arc(x, y, innerRadius, Math.PI * 2, Math.PI * 1.5, true)ctx.quadraticCurveTo(y - ketebalan, (x - innerRadius) - ketebalan / 2, x, y - innerRadius - ketebalan)ctx.fill();
Karena cara menggambarnya sama persis dengan lingkaran pertama, maka tidak perlu mengulanginya saja.
9. Putar Kanvastransformasi: putar (-135 derajat);
Karena rotasi CSS lebih nyaman dan menghemat perhitungan sudut, saya menggunakan transformasi CSS untuk memutar. Tentu saja Canvas juga menyediakan metode rotasi
Kode lengkap
<!DOCTYPE html><html lang=cn><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Konten yang kompatibel=ie=Edge> <title>kanvas</title> <style> .ring { lebar: 150 piksel; tinggi: 150 piksel; flex; menyelaraskan-item: tengah; justifikasi-konten: tengah; arah fleksibel: posisi kolom: relatif; } #tutorial { transformasi: putar (-135 derajat); absolut; ukuran font: 30 piksel; berat font: tebal; warna: merah; berat font: lebih ringan; } .title { warna: merah; bawah: 0; posisi: absolut; 150></canvas> <span class=fraction>100 <span class=small>Poin</span> </span> <span class=title>Poin Layanan</span> </div> <script> let radius = 75 misalkan ketebalan = 10 misalkan innerRadius = radius - ketebalan misalkan x = 75 misalkan y = 75 var canvas = document.getElementById('tutorial'); ctx.beginPath(); ctx.arc(x, y, radius, Matematika.PI * 1.5, Math.PI) ctx.quadraticCurveTo((x - innerRadius) - ketebalan/2 , y - ketebalan, x - innerRadius, y) ctx.arc(x, y, innerRadius, Math.PI, Math.PI * 1.5, true) ctx.quadraticCurveTo(y - ketebalan, (x - innerRadius) - ketebalan / 2, x, y - innerRadius - ketebalan) ctx.fill(); ctx.beginPath(); ctx.fillStyle = #e87c7c; ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI * 2) ctx.quadraticCurveTo((x + innerRadius) + ketebalan / 2, y + ketebalan, x + innerRadius, y) ctx.arc(x, y, innerRadius, Math.PI * 2, Math.PI * 1.5, true) ctx.quadraticCurveTo(y - ketebalan, (x - innerRadius) - ketebalan / 2, x, y - innerRadius - ketebalan) ctx.fill(); </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.