canvas - وبسایت آموزشی وب تی ام ال

Canvas در HTML

در HTML با استفاده از تگ canvas می توانیم بخشی از صفحه را برای رسم اشکال دو بعدی تعیین کنیم. در واقع تگ Canvas به تنهایی هیچ خروجی در مرورگر نمایش نمی دهد و برای برای رسم شکل، رنگ آمیزی و متحرک سازی، می بایست از javascript استفاده کنیم.

تفاوت canvas و svg

۱- svg برای طراحی گرافیک دو بعدی از xml استفاده می کند اما کانواس با استفاده از اسکریپت نویسی (جاوااسکریپت) این کار را انجام می دهد.

۲- به دلیل این که svg بر پایه xml است، هر المان آن از طریق DOM قابل دسترسی می باشد.

۳- در svg هر شکل رسم شده، در حکم یک object است، اگر ویژگی های آن تغییر کند، مرورگر می تواند به طور خودکار، آن را دوباره رندر نماید.

۴- کانواس به صورت پیکسل به پیکسل رندر می شود؛ این بدین معنی است که بعد از رسم آن، اگر موقعیتش تغییر کند، تمامی شکل می بایست دوباره رسم شود. اما svg برای اپلیکیشن هایی که نیاز به رندر کردن در سطح زیادی دارند، مناسب است. (مثلاً مناسب برای Google Maps)

۵- کانواس بر مبنای پیکسل است؛ بدین معنی که اگر تصویر زوم شود، از کیفیت آن کاسته می شود. اما svg اشکال را به صورت برداری رسم می کند (vector-based)؛ یعنی با افزایش یا کاهش زوم، کیفیت تصویر، تغییری نمی کند.

۶- می توانید تصویر رسم شده توسط canvas را با فرمت jpg. یا png. ذخیره کنید.

۷- به دلیل این که svg از DOM استفاده می کند، سرعت رندر شدن آن پایین است. بنابراین برای ساخت بازی ها، اغلب از کانواس استفاده می شود.

پشتیبانی مرورگرها از canvas

در صورتی که مرورگری از کانواس پشتیبانی نکند، اگر متنی در تگ canvas موجود باشد، فقط آن متن نمایش داده می شود. در جدول زیر اولین ورژن از مرورگرهایی را مشاهده می کنید که به صورت کامل از canvas پشتیبانی می کنند:

مثال

Canvas یک فضای مستطیل شکل را در صفحه HTML مشخص می کند. به صورت پیش فرض کانواس، هیچ گونه محتوا و border ندارد. در زیر مثالی آورده شده است:

<canvas id="myCanvas" width="200" height="100"></canvas>

توجه داشته باشید، به Canvas ویژگی id بدهید، همچنین ویژگی های width و height را برای تعیین اندازه تصویر، تعیین کنید. برای دادن border به تصویر می توانید از ویژگی style استفاده کنید. به مثال زیر توجه کنید:

 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

در مثال زیر به رسم خط می پردازیم:

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>
</pre>

رسم دایره را در مثال زیر می بینید:

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<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> 
</body>
</html>

ارجاعات:
www.w3schools.com