بوم نقاشی (Canvas)
عنصر «بوم نقاشی (Canvas)» یک قاب خالی برای نقاشی است. «بوم» خودش چیزی نمی کشد. اما با «جاوااسکریپت (JavaScript)» روی آن می کشیم. دقیقا مثل دفتر سفید که با مداد نقاشی می کنی.
Canvas چیست؟
بوم یک مستطیل در صفحه است. مرز ندارد و محتوا ندارد. با اسکریپت، خط، دایره، متن، تصویر و گرادیان می کشیم. همه مرورگرهای مهم آن را پشتیبانی می کنند.
ایجاد یک Canvas خالی
همیشه برای بوم «id» و اندازه بده. مرز را با style می گذاری.
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
افزودن جاوااسکریپت برای نقاشی
اول بوم را بگیر. سپس با context نقاشی کن. «context» قلم نقاشی است.
کشیدن خط
<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>
نوشتن متن دورخط (Stroke)
<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");
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
<\/script>
گرادیان شعاعی
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
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>
تمرین سه مرحله ای: بوم نقاشی
- یک بوم با مرز مشکی بساز.
- یک خط و یک دایره بکش.
- یک متن پرشده و گرادیان اضافه کن.
نکته: اگر چیزی ندیدی، کنسول مرورگر را چک کن.
جمع بندی سریع
- Canvas ظرف خالی برای نقاشی است.
- همه چیز با JavaScript کشیده می شود.
- با context ابزار نقاشی داری.
- متن، شکل، تصویر و گرادیان ممکن است.
بیشتر بخوان: بوم نقاشی، SVG. برای آشنایی با ورودی ها، صفحه انواع ورودی را ببین.