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