English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
علامة <canvas> هي عنصر HTML5، تستخدم كحاوية لرسم العناصر الثنائية الأبعاد والصور الرقمية في مستندات HTML. يتم رسم الرسوم الفعلية داخل هذه الحاوية باستخدام علامة <script>. وتُعرف هذه العلامة أيضًا بعنصر <canvas>.
عرض مستطيل أزرق عبر عنصر <canvas>:
!doctype html
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 canvas بواسطة ar.oldtoolbag.com</title>
</head>
<body>
<h1>مثال على الرسومات</h1>
<canvas id="w3codebox_com_canvas" width="125" height="125"></canvas>
<script>
var canvas = document.getElementById("w3codebox_com_canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#4B6692";
ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);
</script>
</body>
</html>التحقق من ‹/›IEFirefoxOperaChromeSafari
يدعم متصفحات Internet Explorer 9، Firefox، Opera، Chrome وSafari علامة <canvas>.
ملاحظة:لا يدعم متصفح Internet Explorer 8 أو الإصدارات الأقدم من Internet Explorer علامة <canvas>.
العلامة <canvas> تستخدم عبر سكريبت (عادةً JavaScript) لرسم الرسوم (مثل الرسوم البيانية والأشكال الأخرى).
علامة <canvas> هي حاوية للرسومات فقط، وسيكون عليك استخدام سكريبت لتسجيل الرسومات.
يتم وضع علامة <canvas> داخل علامة <body>.
يؤدي علامة <canvas> إلى وظيفة حاوية للرسومات. يتم رسم جميع الرسومات خارج علامة <canvas> باستخدام علامة <script> التي تحتوي على API لـ Canvas Script أو API لـ WebGL.
علامة <canvas> هي علامة جديدة في HTML5.
ملاحظة:سيتم عرض أي نص في علامة <canvas> في المتصفحات التي لا تدعم <canvas>.
نصيحة:إذا كنت ترغب في معرفة جميع الخصائص والطرق لـ canvas، يرجى الرجوع إلىدليل مرجع <canvas> في HTML.
جديد: خصائص جديدة في HTML5.
| الخصائص | القيمة | وصف |
|---|---|---|
| طولHTML5 | بكسل | يحدد طول اللوحة. |
| عرضHTML5 | بكسل | يحدد عرض اللوحة. |
دعم <canvas> علامة خصائص العالمية في HTML.
دعم <canvas> علامة خصائص الحدث في HTML.