رسومات قماشية HTML
يستخدم عنصر HTML <canvas>لرسم الرسومات على صفحة الويب.
تم إنشاء الرسم الموجود على اليسار باستخدام <canvas>. يُظهر أربعة عناصر: مستطيل أحمر ، مستطيل متدرج ، مستطيل متعدد الألوان ، ونص متعدد الألوان.
ما هو HTML Canvas؟
يتم استخدام عنصر HTML <canvas>لرسم الرسومات ، على الطاير ، عبر JavaScript.
العنصر <canvas>هو مجرد حاوية للرسومات. يجب عليك استخدام JavaScript لرسم الرسومات بالفعل.
يوجد في Canvas عدة طرق لرسم المسارات والمربعات والدوائر والنص وإضافة الصور.
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم
<canvas>العنصر بشكل كامل.
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
أمثلة على القماش
اللوحة القماشية هي منطقة مستطيلة على صفحة HTML. بشكل افتراضي ، لا تحتوي اللوحة القماشية على حدود ولا تحتوي على محتوى.
يبدو الترميز على النحو التالي:
<canvas id="myCanvas" width="200" height="100"></canvas>
ملاحظة: حدد دائمًا idسمة (يُشار إليها في نص برمجي) ، widthوسمة heightلتحديد حجم اللوحة. لإضافة حد ، استخدم styleالسمة.
فيما يلي مثال على لوحة قماشية أساسية فارغة:
مثال
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;">
</canvas>
أضف JavaScript
بعد إنشاء مساحة قماش مستطيلة ، يجب عليك إضافة JavaScript للقيام بالرسم.
وهنا بعض الأمثلة:
ارسم خطا
مثال
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
أرسم دائرة
مثال
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
ارسم نصًا
مثال
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
نص السكتة الدماغية
مثال
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
ارسم تدرج خطي
مثال
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
ارسم تدرج دائري
مثال
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
ارسم صورة
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>
دروس قماش HTML
لمعرفة المزيد حول <canvas>، يرجى قراءة دروس HTML Canvas الخاصة بنا .