كيفية رسم خطوط منقطة على القماش باستخدام الدوال المثلثية

لأن واجهة برمجة التطبيقات القماشية لا تحتوي على خطوط منقطة

لذلك تحتاج إلى تنفيذها بنفسك

ألن يكون من الجيد مراجعة الدوال المثلثية بالمناسبة؟

 var context=document.getElementById(canvas).getContext(2d);function drawDashedLine(context,x1,y1,x2,y2,dashlength){ Dashlength=dashlength===unified?5:dashlength var deltaX=x2-x1; // طول الجانب القائم الزاوية var deltay=y2-y1; // طول الجانب الآخر من التعليمات var numDashes=Math.floor( Math.sqrt(deltaX*deltaX+deltay*deltay)/dashlength // تُرجع Math.sqrt الجذر التربيعي لطول شرطة الرقم وطول كل نقطة من الخط المتقطع) var everydashLength_x=deltaX/numDashes // تحديد كل نقطة على المحور X نقطة البداية لنقاط الخط المنقط var everydashLength_y=deltay/numDashes // تحديد نقطة البداية لكل نقطة خط متقطع على المحور Y for(var i=0;i<numDashes;i++){ context[i%2===0?'moveTo':lineTo] (x1+everydashLength_x* أنا،y1 +everydashLength_y*i) } context.stroke()}context.lineWidth=3context.strokeStyle=bluedrawDashedLine(context,20,20,context.canvas.width-20,20,20)

التأثير كما هو موضح في الشكل

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