‎‎تگ بومHTML <canvas> Tag -‎

‎‎مثال ـ كشيدن مستطيل قرمز در بوم

 <canvas id="myCanvas">
Your browser does not support the canvas tag.
</canvas>

<script>
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script > 

‎‎تعريف وكاربردDefinition and Usage -‎

‎تگ‎<canvas>‎ بوم يا محفظ ايست براي ترسيم گرافيك از طريق اسكريپت(java script) ‎اين گرافيك بصورت بيت مپي ميباشدوبعنوان تصوير در جريان نامند

‎هر متني در داخل‎<canvas>‎ توسط مرور گر نمايش داده ميشود، اما در ترسيم ‎گرافيك توسط جاوااسكريپت بآن توجهي نيست وناديده گرفته ميشود.

‎‎پشتيباني مرورگرBrowser Support -‎

‎

‎Element‎
‎‎<canvas>‎‎	‎‎4.0‎	‎‎9.0‎	‎‎2.0‎	‎‎3.1‎	‎‎9.0‎

‎‎ويژگي هاAttributes -‎

‎‎ويژگي هاي جهانيGlobal Attributes -‎

‎‎تگ‎<canvas>‎ از ويژگي هاي جهاني HTML پيروي ميكند .

‎‎ويژگي هاي رويداديEvent Attributes -‎

‎‎همچنين اين تگ از ويژگي هاي رويدادHTML پيروي ميكند .

‎‎مثالهاي بيشتر

‎‎مثال ـ نمونه ديگري از تگ بوم

 <canvas id="myCanvas">
Your browser does not support the canvas tag.
</canvas>

<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
//Turn transparency on
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script > 

‎‎تنظيمات پيش فرضDefault CSS Settings -‎

‎‎بيشتر مرورگرها تگ‎<canvas>‎ با مقادير پيش فرض زير نمايش ميدهند .

canvas {
  height: 150px;
  width: 300px;
}

‎‎پشتيباني مرورگرBrowser Support -‎

‎

‎Element‎
‎‎<dt>‎‎	‎Yes‎	‎Yes‎	‎Yes‎	‎Yes‎	‎Yes‎

‎‎ويژگي هاي جهانيGlobal Attributes -‎

‎‎تگ‎<dt>‎ از ويژگي هاي جهاني HTML پيروي ميكند .

‎‎ويژگي هاي رويداديEvent Attributes -‎

‎‎تگ فوق همچنين از ويژگي هاي رويدادي پيروي ميكند.

‎‎تنظيمات پيش فرضDefault CSS Settings -‎

‎‎اغلب مرورگرها نمايش عنصر‎<dt>‎ مطابق تنظيمات پيش فرضي زيرانجام ميدهند .

‎مرجع كامل تگهايHTML‎
‎مرجع كامل ويژگيهايHTML‎

HTML Reference فهرست ها

HTML References

HTML TAGS --