رسم قماش HTML
ارسم على القماش باستخدام JavaScript
يجب أن يتم كل الرسم على لوحة HTML باستخدام JavaScript:
مثال
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
الخطوة 1: ابحث عن عنصر Canvas
بادئ ذي بدء ، يجب أن تجد عنصر <canvas>.
يتم ذلك باستخدام طريقة HTML DOM getElementById ():
var canvas = document.getElementById("myCanvas");
الخطوة 2: إنشاء كائن رسومي
ثانيًا ، أنت بحاجة إلى كائن رسومي للقماش.
() getContext هو كائن HTML مضمن ، له خصائص وطرق للرسم:
var ctx = canvas.getContext("2d");
الخطوة 3: ارسم على القماش
أخيرًا ، يمكنك الرسم على القماش.
عيّن نمط التعبئة للعنصر الرسومي على اللون الأحمر:
ctx.fillStyle = "#FF0000";
يمكن أن تكون الخاصية fillStyle لونًا أو تدرجًا أو نقشًا في CSS. لون fillStyle الافتراضي هو الأسود.
ترسم طريقة fillRect ( x ، y ، width ، height ) مستطيلاً ، مملوءًا بنمط التعبئة ، على اللوحة القماشية:
ctx.fillRect(0, 0, 150, 75);