Penjelasan rinci tentang sifat-sifat garis kanvas

Nilai: pantat (nilai default), bulat, persegi

 var kanvas=dokumen.getElementById(kanvas);kanvas.lebar=800;kanvas.tinggi=800;var konteks=kanvas.getContext(2d);context.lineWidth=40;context.strokeStyle=#005588;//Tiga Beginpath() menggambar tiga garis sejajar konteks.beginPath();context.moveTo(100,200);co ntext.lineTo(700,200);context.lineCap=butt;context.stroke();context.beginPath();context.moveTo(100,400);context.lineTo(700,400);context.lineCap=roun d;context.stroke();context.beginPath();context.moveTo(100.600);context.lineTo(700.600);context.lineCap=persegi;context.stroke();//baselinecontext.li neWidth=1;context.strokeStyle=#27a;context.moveTo(100,100);context.lineTo(100,700);context.moveTo(700,100);context.lineTo(700,700);context.stroke();

Jika bulat digunakan untuk animasi, sudut membulat dapat digambar secara langsung. Efek lineCap hanya dapat digunakan di awal dan akhir segmen garis, bukan pada sambungannya.

lineCap=square dapat digunakan untuk menutup sepenuhnya segmen garis ketika ditutup, namun tetap disarankan untuk menggunakan kainPath() untuk menutupnya.

 var kanvas=document.getElementById(kanvas);kanvas.lebar=800;kanvas.tinggi=800;var konteks=kanvas.getContext(2d);context.beginPath();context.moveTo(100, 350);context.lineTo(500,350);context.lineTo(500,200);context.lineTo(700,400);context.lineTo(500,600);context.lineTo(500,450);context.lineTo(100,450);context.lineTo(100,350 );// konteks.closePath(); //Direkomendasikan konteks.lineWidth=10;context.lineCap=persegi; //Tidak disarankan konteks.fillStyle=kuning;context.strokeStyle=#058context.fill();context.stroke();

Lima sudut pada sebuah lingkaran membagi dua 360°, masing-masing sudutnya 72°, 90°-72°=18°

Sudut pada lingkaran kecil membagi dua 72°, 18°+36°=54°

Sudut ke radian - radian = sudut*π/180, yaitu (18+i*72)*Math.PI/180

 var canvas=document.getElementById(canvas);canvas.width=800;canvas.height=800;var konteks=canvas.getContext(2d);context.beginPath();//Sudut ke radian: bagi dengan 180*PIfor( var i=0;i<5;i++){ konteks.lineTo(Math.cos((18+i*72)/180*Math.PI)*300+400, -Math.sin((18+i*72)/180*Math.PI)*300+400 ); konteks.lineTo(Matematika.cos((54+i*72)/180*Matematika.PI)*150+400, -Math.sin((54+i*72)/180*Math.PI)*150+400);}context.closePath();context.lineWidth=10;context.stroke();

Dienkapsulasi menjadi suatu fungsi:

 window.onload=fungsi(){ var kanvas=dokumen.getElementById(kanvas); kanvas.lebar=800; kanvas.tinggi=800; var konteks=kanvas.getContext(2d); 150.300.400.400)} fungsi drawStar(ctx,r,R,x,y,){ ctx.beginPath(); //Sudut ke radian: bagi dengan 180*PI for(var i=0;i<5;i++){ ctx.lineTo(Math.cos((18+i*72)/180*Math .PI)*R+x, -Math.sin((18+i*72)/180*Matematika.PI)*R+y); ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*r+x, -Math.sin((54+i*72)/180*Math.PI)*r+y ); } ctx.closePath(); ctx.stroke();}

Ubah r=80, 200, dan 400 kecil masing-masing untuk mendapatkan grafik berikut

Tambahkan parameter rotasi searah jarum jam: rot

 window.onload=fungsi(){ var kanvas=dokumen.getElementById(kanvas); kanvas.lebar=800; kanvas.tinggi=800; var konteks=kanvas.getContext(2d); 150,300,400,400,30);} //Fungsi sudut rotasi searah jarum jam drawStar(ctx,r,R,x,y,rot){ ctx.beginPath(); //Sudut ke radian: bagi dengan 180*PI for(var i=0;i<5;i++){ ctx.lineTo( Matematika.cos((18+i*72-rot)/180*Matematika.PI)*R+x, -Math.sin((18+i*72-rot)/180*Math.PI)*R+y); ctx.lineTo(Math.cos((54+i*72-rot)/180*Math.PI )*r+x, -Math.sin((54+i*72-rot)/180*Math.PI)*r+y); ctx.closePath(); ctx.stroke();}

Efek memutar 30 derajat adalah sebagai berikut:

1. nilai lineJoin

mitra (default) selalu menghadirkan sudut lancip, mitra bevel, sudut bulat

Kemiringannya seperti efek pita yang dilipat ke bawah.

2. Atribut miterLimit terkait mitra

Atur r kecil ke 30 dan lineJoin ke mitra. Efeknya adalah sebagai berikut: sudut tidak diperpanjang menjadi sudut tajam, tetapi ditampilkan secara miring.

 konteks.lineJoin=miter;drawStar(konteks,30,300,400,400,30);

Mengapa?

Karena nilai default dari konteks.miterLimit=10 adalah 10,

miterlimit hanya efektif jika lineJoin adalah mitra.

miterLimit mengacu pada nilai maksimum jarak antara sudut dalam dan luar yang dihasilkan ketika miter digunakan sebagai cara untuk menghubungkan garis.

Nilai defaultnya adalah 10, artinya nilai maksimumnya adalah 10px. Setelah melebihi 10px, maka akan ditampilkan dalam mode bevel.

Jika jari-jari lingkaran dalam r diatur ke 30 ke atas, maka sudut lancip yang terbentuk sangat lancip, dan jarak antara sudut dalam dan sudut luar melebihi miterLimit sebesar 10.

Sekarang ubah miterlimit ke nilai yang lebih besar, menjadi 20. Efeknya adalah sebagai berikut:

 konteks.lineJoin=miter; konteks.miterLimit=20; drawStar(konteks,30,300,400,400,30);

Catatan: miterLimit bukanlah jarak dari ujung putih ke ujung hitam. Jarak ini jauh lebih besar dari 20px.

Saat miterLimit dibuat, garis harus mempunyai lebar, dan sudut lancip dari garis tengah garis yang lebar adalah jarak langsung dari sudut lancip terluar.

Canvas memberikan nilai pengalaman miterLimit sebesar 10. Hanya dalam keadaan yang sangat khusus, ketika sudut yang sangat tajam perlu direpresentasikan, miterLimit perlu dimodifikasi.

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.