HTML Tutorial

عنصر <canvas>

استخدام عنصر <canvas>

يعمل عنصر <canvas> على إنشاء مساحة رسومية تسمح برسم الأشكال الديناميكية والتلاعب بها باستخدام جافاسكريبت.

خصائص عنصر <canvas>

  • width: تحدد عرض مساحة الرسم بالبكسل.
  • height: تحدد ارتفاع مساحة الرسم بالبكسل.

أمثلة لاستخدام عنصر <canvas>:

  • إنشاء رسوم بيانية
  • رسم الأشكال التفاعلية
  • معالجة الصور
  • إنشاء ألعاب فيديو بسيطة

مثال HTML:

لاستكشاف عنصر <canvas>، قم بإنشاء ملف HTML يحتوي على التعليمات البرمجية التالية:

<!DOCTYPE html>
<html>
<head>
  <title>Exploring the &lt;canvas&gt; Tag</title>
</head>
<body>
  <canvas id="myCanvas" width="500" height="300"></canvas>

  <script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    // ارسم مستطيلاً
    ctx.fillStyle = "red";
    ctx.fillRect(50, 50, 100, 100);
  </script>
</body>
</html>