مثال
رسم مربع أحمر، على الطاير، وتبين أنها داخل <canvas> العنصر:
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
انها محاولة لنفسك » تعريف واستخدام
و <canvas> يستخدم كلمة دلالية لرسم الرسومات، على الطاير، عن طريق البرمجة (جافا سكريبت عادة).
و <canvas> العلامة ليست سوى وعاء للرسومات، يجب استخدام برنامج نصي لرسم الواقع الرسومات.
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم تماما العنصر.
| العنصر | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | تسعة | 2.0 | 3.1 | تسعة |
الخلافات بين HTML 4.01 و HTML5
و <canvas> البطاقة هي جديدة في HTML5.
نصائح وملاحظات
ملاحظة: أي نص داخل <canvas> سيتم عرض عنصر في المتصفحات التي لا تدعم <canvas> .
نصيحة: تعلم المزيد عن <canvas> عنصر في منطقتنا HTML قماش التعليمي .
نصيحة: للحصول علىإشارة كاملة من كافة الخصائص والأساليب التي يمكن استخدامها مع الكائن قماش، انتقل إلى لدينا HTML قماش المرجعي .
الصفات
= جديد في HTML5.
| السمة | القيمة | وصف |
|---|---|---|
| height | pixels | يحدد ارتفاع قماش |
| width | pixels | يحدد عرض من قماش |
السمات العامة
و <canvas> كما يدعم بطاقة و السمات العامة في HTML .
سمات الحدث
و <canvas> كما يدعم هذا الكود في حدث سمات في HTML .
الإعدادات الافتراضية CSS
لا شيء.