بوم (canvas)
تگ «بوم (Canvas)» یک جای خالی برای نقاشی است. نقاشی را با «جاوااسکریپت (JavaScript)» می کشی. خود بوم فقط ظرف است. اگر جاوااسکریپت خاموش باشد، متن داخلی نمایش می شود.
تعریف و کاربرد بوم در HTML
تگ <canvas> برای کشیدن گرافیکِ لحظه ای استفاده می شود. خود تگ شفاف است و فقط نگهدارنده تصویر است. پس حتماً با اسکریپت، شکل ها را رسم کن.
نمونه سریع: رسم مستطیل قرمز
<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>
ویژگی ها و اندازه بوم
دو ویژگی کلیدی داریم: width و height بر حسب پیکسل. مقدار پیش فرض عرض 300 و ارتفاع 150 است. بهتر است اندازه را روی خود تگ تنظیم کنی.
شفافیت و روی هم افتادگی شکل ها
<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);
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>
تنظیمات پیش فرض CSS
canvas {
height: 150px;
width: 300px;
}
گام های عملی شروع کار
- یک
<canvas>باidبساز. - در اسکریپت، کانتکست دوبعدی را بگیر.
- رنگ بده و با
fillRectرسم کن.
نکته: برای توضیح کامل، Canvas Tutorial و Canvas Reference را ببین. همچنین راهنمای بدنه (body) و دکمه (button) هم کاربردی است. برای مرور تند، بوم در HTML را ذخیره کن.
جمع بندی سریع
- بوم ظرف خالی گرافیک است.
- نقاشی فقط با جاوااسکریپت انجام می شود.
- اندازه پیش فرض 300×150 پیکسل است.
- متن داخلی، در نبود اسکریپت نمایش می شود.