الرسم بالخطوط والملء في لوحة الرسم في HTML5

كلما تم رسم شكل على لوحة الرسم HTML5، يجب تعيين اثنين من الخاصيات: Stroke (الخطوط) و Fill (الملء)

خصائص الخطوط والملء

كلما تم رسم شكل على لوحة الرسم HTML5، يجب تعيين اثنين من الخاصيات:

1. خطوط

2. ملء

Stroke (الخطوط) و Fill (الملء) تحدد كيفية رسم الشكل. Stroke هو حواف الشكل. Fill هو محتوى داخل الشكل.

مثال عبر الإنترنت

هذا مثال على مستطيل رسمه بالخط الأزرق والملء الأخضر (وفي الواقع هما مستطيلان):

هذا هو رمز رسم هذين المربعين:

<canvas id="ex1" width="500" height="150" style="border: 1px solid #cccccc;">
　　　　HTML5 Canvas غير مدعوم
</canvas>
<script>
// 1. الانتظار حتى يتم تحميل الصفحة بشكل كامل.
window.onload = function() {
　　　　drawExamples();
}
function drawExamples(){
　　　　// 2. الحصول على مرجع إلى عنصر canvas.
　　　　var canvas = document.getElementById("ex1");
　　　// 3. الحصول على سياق 2D من عنصر canvas.
　　　　var context = canvas.getContext("2d");
　　　　// 4. رسم الرسوم البيانية.
　　　　context.fillStyle = "#009900";
　　　　context.fillRect(10,10, 100,100);
　　　　context.strokeStyle = "#0000ff";
　　　　context.lineWidth = 5;
　　　　context.strokeRect(10,10, 100,100);
}
</script>

نتائج التشغيل للنموذج أعلاه:

لاحظ كيفية تعيين أنماط الرسم بالخطوط والملء باستخدام خاصيتي strokeStyle و fillStyle في سياق 2D.

لاحظ أيضًا كيفية تعيين عرض الخط للرسم باللون الأزرق للرسم المرسوم باستخدام خاصية lineWidth. إذا تم تعيين lineWidth إلى 5، فإن عرض الخط المرسوم للمستطيل الم��سي هو 5.

في النهاية، انتبه إلى كيفية تحديد رسم مستطيل ملون أو مسطر مملوء باستخدام سياق 2D.