Menggambar banyak deformasi dengan Canvas sangatlah sederhana, Anda hanya perlu memahami jalur Canvas + pengetahuan matematika SMP sederhana untuk menyelesaikannya.
CodePen terbuka
menguraikanIdenya seperti di atas, sangat sederhana, cukup hitung posisi setiap titik dan gambar jalur melalui lineTo()
Kode inti diurai sebagai berikut (atau dilihat di CodePen):
function drawPolygonPath(sideNum, radius, originX, originY, ctx){ ctx.beginPath(); const unitAngle = Math.PI * 2 / sideNum; //Hitung satuan sudut misalkan sudut = 0; //Sudut awal misalkan xLength, yLength; // ctx.moveTo(originX, originY); for(misalkan i = 0; i < sideNum; i++){ //Lintasi titik perhitungan dan gambar jalurnya dengan lineTo() xLength = radius * Math.cos(angle); yLength = radius * Math.sin(angle); /Gambar Jalur sudut += unitAngle } ctx.closePath();//Jalur tertutup, Anda juga dapat mengulang lineTo() sekali lagi dalam perulangan for ke titik awal}Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.