คำอธิบายโดยละเอียดเกี่ยวกับคุณสมบัติของเส้นแคนวาส

ค่า: ก้น (ค่าเริ่มต้น), กลม, สี่เหลี่ยม

 var canvas=document.getElementById(canvas);canvas.width=800;canvas.height=800;var context=canvas.getContext(2d);context.lineWidth=40;context. strokeStyle=#005588;//Three beginningpath() วาดเส้นคู่ขนานสามเส้น context.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=square;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.จังหวะ();

เมื่อใช้ทรงกลมสำหรับภาพเคลื่อนไหว คุณสามารถวาดมุมโค้งมนได้โดยตรง เอฟเฟกต์ของ lineCap สามารถใช้ได้ที่จุดเริ่มต้นและจุดสิ้นสุดของส่วนของเส้นเท่านั้น ไม่สามารถใช้ที่จุดเชื่อมต่อ

lineCap=square สามารถใช้เพื่อปิดส่วนของเส้นโดยสมบูรณ์เมื่อปิด แต่ยังคงแนะนำให้ใช้ clothPath() เพื่อปิด

 var canvas=document.getElementById(canvas);canvas.width=800;canvas.height=800;var context=canvas.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 );// context.closePath(); // แนะนำ context.lineWidth=10;context.lineCap=square; // ไม่แนะนำ context.fillStyle=yellow;context. strokeStyle=#058context.fill();context. stroke();

มุมทั้งห้าบนวงกลมแบ่งออกเป็น 360° แต่ละมุมคือ 72°, 90°-72°=18°

มุมบนวงกลมเล็กแบ่งออกเป็น 72°, 18°+36°=54°

มุมเป็นเรเดียน - เรเดียน = มุม*π/180 นั่นคือ (18+i*72)*Math.PI/180

 var canvas=document.getElementById(canvas);canvas.width=800;canvas.height=800;var context=canvas.getContext(2d);context.beginPath();//มุมเป็นเรเดียน: หารด้วย 180*PIfor( var i=0;i<5;i++){ context.lineTo(Math.cos((18+i*72)/180*Math.PI)*300+400, -Math.sin((18+i*72)/180*Math.PI)*300+400 ); context.lineTo(Math.cos((54+i*72)/180*Math.PI)*150+400, -Math.sin((54+i*72)/180*Math.PI)*150+400);}context.closePath();context.lineWidth=10;context. stroke();

ห่อหุ้มเป็นฟังก์ชัน:

 window.onload=function(){ var canvas=document.getElementById(canvas); canvas.height=800; var context=canvas.getContext(2d); บริบท 150,300,400,400)} ฟังก์ชัน DrawStar(ctx,r,R,x,y,){ ctx.beginPath(); //มุมเป็นเรเดียน: หารด้วย 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*Math.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.closePath();

แก้ไขค่าขนาดเล็ก r=80, 200 และ 400 ตามลำดับเพื่อให้ได้กราฟิกต่อไปนี้

เพิ่มพารามิเตอร์การหมุนตามเข็มนาฬิกา: rot

 window.onload=function(){ var canvas=document.getElementById(canvas); canvas.height=800; var context=canvas.getContext(2d); บริบท 150,300,400,400,30);} // หมุนฟังก์ชันมุมการหมุนตามเข็มนาฬิกา DrawStar(ctx,r,R,x,y,rot){ ctx.beginPath(); //มุมเป็นเรเดียน: หารด้วย 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*Math.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.จังหวะ();}

ผลของการหมุน 30 องศาจะเป็นดังนี้:

1. ค่า lineJoin

ตุ้มปี่ (ค่าเริ่มต้น) จะแสดงมุมที่คมเสมอ ตุ้มปี่มุมมน

มุมเอียงนั้นเหมือนกับเอฟเฟกต์ของริบบิ้นที่พับลง

2. คุณลักษณะ miterLimit ที่เกี่ยวข้องกับ Mitre

ตั้งค่า r เล็กๆ เป็น 30 และ lineJoin ให้เป็นตุ้มปี่ เอฟเฟกต์จะเป็นดังนี้: มุมจะไม่ขยายออกเป็นมุมแหลม แต่จะแสดงในลักษณะเอียง

 context.lineJoin=miter;drawStar(บริบท,30,300,400,400,30);

ทำไม

เนื่องจากค่าเริ่มต้นของ context.miterLimit=10 คือ 10

miterlimit จะมีผลเฉพาะเมื่อ lineJoin เป็น miter

miterLimit หมายถึง ค่าสูงสุดของระยะห่างระหว่างมุมด้านในและด้านนอกที่เกิดขึ้น เมื่อใช้ miter เป็นวิธีการเชื่อมต่อเส้น

ค่าเริ่มต้นคือ 10 ซึ่งหมายความว่าค่าสูงสุดคือ 10px เมื่อเกิน 10px มันจะแสดงในโหมดยกนูน

เมื่อตั้งค่ารัศมีวงกลมด้านใน r ไว้ที่ 30 ด้านบน มุมแหลมที่เกิดขึ้นจะคมมาก และระยะห่างระหว่างมุมด้านในกับมุมด้านนอกเกินขีดจำกัดตุ้มปี่ที่ 10

ตอนนี้เปลี่ยน miterlimit เป็นค่าที่มากขึ้นเป็น 20 เอฟเฟกต์จะเป็นดังนี้:

 context.lineJoin=miter; context.miterLimit=20; DrawStar(บริบท,30,300,400,400,30);

หมายเหตุ: miterLimit ไม่ใช่ระยะห่างจากปลายสีขาวถึงปลายสีดำ ระยะนี้มากกว่า 20px มาก

เมื่อสร้าง miterLimit เส้นจะต้องมีความกว้าง และมุมแหลมของเส้นกลางของเส้นที่มีความกว้างคือระยะห่างโดยตรงจากมุมแหลมด้านนอก

canvas ให้ค่าประสบการณ์ miterLimit เป็น 10 เฉพาะในสถานการณ์ที่พิเศษอย่างยิ่งเท่านั้น เมื่อจำเป็นต้องแสดงมุมที่แหลมคมมาก จำเป็นต้องแก้ไข miterLimit

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network