خطوط Canvas HTML

النموذج

// إنشاء الرسم البياني:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// تحديد مسار جديد:
ctx.beginPath();
// تحديد البداية:
ctx.moveTo(0, 0);
// تحديد النهاية:
ctx.lineTo(200, 100);
// رسم:
ctx.stroke();

جرب بنفسك

رسم خطوط Canvas

يستخدم رسم الخط مسارًا في الرسم البياني:

الطريقة

تستخدم طريقة beginPath لبدء مسار جديد. لا يرسم أي شيء، فقط يحدد مسارًا جديدًا.

يحدد moveTo بداية الخط. لا يرسم أي شيء، فقط يحدد بداية.

يحدد طريقة lineTo نهاية الخط. لا يرسم أي شيء، فقط يحدد نهاية.

يستخدم طريقة stroke() لرسم الخط فعليًا. اللون الافتراضي للخط هو الأسود.

خاصية lineWidth

يحدد خاصية lineWidth عرض الخط المستخدم في رسم على الرسم البياني.

يجب إعدادها قبل إجراء مكالمة stroke().

النموذج

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.stroke();

جرب بنفسك

خاصية strokeStyle

يحدد خاصية strokeStyle النمط المستخدم في رسم على الرسم البياني.

يجب إعدادها قبل إجراء مكالمة stroke().

النموذج

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.stroke();

جرب بنفسك

خاصية lineCap

يحدد خاصية lineCap نمط نهاية الخط (butt،round أو square).

القيمة الافتراضية هي square (مربعة).

يجب إعدادها قبل إجراء مكالمة stroke().

النموذج

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(175,75);
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.stroke();

جرب بنفسك

انظر أيضًا:

دليل مرجعي كامل لCanvas في CodeW3C.com