English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
من بين الأشكال التي يمكن رسمها بسهولة على عنصر كanvas في HTML5، المربع هو أحد الأكثر سهولة. يمكنك استخدام دالة fillRect() في سياق الـ 2D وأيضاً دالة strokeRect().
من بين الأشكال التي يمكن رسمها بسهولة على عنصر كanvas في HTML5، المربع هو أحد الأكثر سهولة. يمكنك استخدام دالة fillRect() في سياق الـ 2D وأيضاً دالة strokeRect(). هذا هو مثال بسيط:
<canvas id="ex1" width="500" height="150" style="border: 1px solid #cccccc;">
لا يدعم Canvas HTML5
</canvas>
<script>
عدد كanvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(10,10, 100,100);
context.strokeStyle = "#0000ff";
context.strokeRect(30,20, 120,110);
</script>الاختبار لرؤية ‹/›يمكنك استخدام خصائص lineWidth في سياق الخط 2D لتحديد عرض خط رسم المربعات. يتم ذلك كما يلي:
<canvas id="ex4" width="500" height="150" style="border: 1px solid #cccccc;">
لا يدعم Canvas HTML5
</canvas>
<script>
عدد كanvas = document.getElementById("ex4");
var context = canvas.getContext("2d");
عدد x = 10;
عدد y = 10;
عدد عرض = 100;
عدد طول = 100;
سياق.lineWidth = 4;
سياق.strokeRect(x, y, عرض, طول);
</script>الاختبار لرؤية ‹/›هذا هو شكل المربع ذو عرض الخط 4:
يمكنك استخدام خصائص fillStyle أو strokeStyle في سياق الـ 2D لتحديد لون رسم المربعات. هذا هو المثال الأول، والتعيينات تظهر هنا بشكل سميك:
<canvas id="ex5" width="500" height="150" style="border: 1px solid #cccccc;">
لا يدعم Canvas HTML5
</canvas>
<script>
var canvas = document.getElementById("ex5");
var context = canvas.getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(10,10, 100,100);
context.strokeStyle = "#0000ff";
context.strokeRect(30,20, 120,110);
</script>الاختبار لرؤية ‹/›هذا هو المثلث الذي سيتم رسمه على اللوحة مجددًا: