شرح تفصيلي لخصائص خطوط القماش

القيم: بعقب (القيمة الافتراضية)، مستديرة، مربعة

 var Canvas=document.getElementById(canvas);canvas.width=800;canvas.height=800;var context=canvas.getContext(2d);context.lineWidth=40;context.strokeStyle=#005588;// ثلاثة خطوط beginpath () ترسم ثلاثة خطوط متوازية 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.stroke();

عند استخدام الجولة للرسوم المتحركة، يمكن رسم الزوايا الدائرية مباشرةً، ولا يمكن استخدام تأثير 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( فار 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.width=800; 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.stroke();}

قم بتعديل r=80 و200 و400 الصغيرة على التوالي للحصول على الرسومات التالية

أضف معلمة دوران في اتجاه عقارب الساعة: rot

 window.onload=function(){ var Canvas=document.getElementById(canvas.width=800; 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-rot)/180*Math.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();}

تأثير الدوران 30 درجة هو كما يلي:

1. قيمة lineJoin

ميتري (افتراضي) يقدم دائمًا زاوية حادة، ومشطوفًا مشطوفًا، وزاوية مستديرة

المجسم المائل يشبه تأثير الشريط المطوي للأسفل.

2. سمات ميتري ليميت ذات الصلة

قم بتعيين r الصغير إلى 30 وlineJoin إلى ميتري ويكون التأثير كما يلي: لا يتم تمديد الزوايا إلى زوايا حادة، ولكن يتم عرضها بطريقة مائلة.

 context.lineJoin=mitre;drawStar(context,30,300,400,400,30);

لماذا؟

لأن القيمة الافتراضية لـ context.miterLimit=10 هي 10،

يكون miterlimit فعالاً فقط عندما يكون lineJoin ميتريًا.

يشير miterLimit إلى القيمة القصوى للمسافة بين الزوايا الداخلية والخارجية التي يتم إنتاجها عند استخدام ميتري كوسيلة لربط الخطوط.

القيمة الافتراضية هي 10، مما يعني أن الحد الأقصى للقيمة هو 10 بكسل. وبمجرد أن تتجاوز 10 بكسل، سيتم عرضها في الوضع المجسم المجسم المجسم مجسم مشطوف الحواف.

عندما يتم ضبط نصف قطر الدائرة الداخلية r على 30 أعلاه، تكون الزاوية الحادة المتكونة حادة جدًا، وتتجاوز المسافة بين الزاوية الداخلية والزاوية الخارجية الحد المتري البالغ 10.

الآن قم بتغيير الحد الأقصى إلى قيمة أكبر، إلى 20. التأثير كما يلي:

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

ملحوظة: miterLimit ليس المسافة من الطرف الأبيض إلى الطرف الأسود، هذه المسافة أكبر بكثير من 20 بكسل.

عند إنشاء miterLimit، يجب أن يكون للخط عرض، وتكون الزاوية الحادة للخط الأوسط للخط ذي العرض هي المسافة المباشرة من الزاوية الحادة الخارجية.

قماش يعطي قيمة تجربة miterLimit 10. فقط في ظروف خاصة للغاية، عندما يلزم تمثيل الزوايا الحادة جدًا، يجب تعديل miterLimit.

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.