الخط في HTML Canvas

تخانة

// إنشاء اللوحة:
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