شكل Canvas HTML

实例

مثال 1

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

جرب بنفسك

رسم خطوط Canvas

يُستخدم مسار الخشبة لرسم الخطوط:

يُستخدم هذا الأسلوب

beginPath() يُستخدم هذا الأسلوب لبدء مسار جديد. لا يرسم أي شيء، فقط يُحدد مسارًا جديدًا.

moveTo() يُستخدم هذا الأسلوب لتحديد بداية الخط. لا يرسم أي شيء، فقط يُحدد بداية.

lineTo() يُستخدم هذا الأسلوب لتحديد نهاية الخط. لا يرسم أي شيء، فقط يُحدد نهاية.

stroke() يُستخدم هذا الأسلوب لرسم الخطوط. لون القلم الافتراضي أسود.

مزيد من الأمثلة

مثال 2

ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.stroke();

جرب بنفسك

مثال 3

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

جرب بنفسك

نصائح

إذا كنت ترغب في رسم شكل مستطيل، لا تحتاج إلى رسم 4 خطوط.

في الفصل التالي، ستتعلم استخدام drawRect() استخدام هذا الأسلوب لرسم الشكل.

strokeStyle خصائص

strokeStyle تعريفها كنمط لرسم الخشبة.

يجب أن يتم stroke() إعدادها قبل

实例

ctx.beginPath();
// 定义矩形
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
// 定义三角形
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.strokeStyle = "red";
ctx.stroke();

جرب بنفسك

انظر أيضًا:

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