0
آموزش کار با Canvas در HTML5 قسمت اول
آموزش کار با Canvas در HTML5 قسمت اول معرفی Canvas
Canvas چیست؟
Canvas یکی از تگ های HTML5 می باشد که با استفاده از جاوااسکریپت می توان اشکال هندسی و طرح های گرافیکی دوبعدی را رو Canvas کشید.
با استفاده از Canvas می توان طرح های دو بعدی ، انیمیشن های دو بعدی و بازی های کامپیوتری با گرافیگ بالا را در صفحات وب پیاده سازی کرد. در سایت http://www.pirateslovedaisies.com می توانید یک نمونه بازی نوشته شده با Canvas و جاوااسکریپت را ببینید. و همچنین در پست های قبلی سایت کد پن را معرفی کردیم، که انیمیشن های زیادی را با استفاده از HTML5 ، CSS3 و javascript پیاده سازی کرده اند.
ایجاد تگ Canvas
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
canvas {
background-color: green;
}
</style>
</head>
<body>
<div>
<canvas width="600" height="600" id="canvas"></canvas>
</div>
<script type="text/javascript" language="javascript">
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
</script>
</body>
</html>
اگر به مثال بالا نگاه کنید خواهید دید که تگ Canvas را قرار دادیم و سپس طول و عرض آن را مشخص کردیم و سپس یک آی دی به نام canvas به آن اختصاص دادیم.
در نهایت توسط CSS یک زمینه سبز رنگ برای آن در نظر گرفتیم.
برای این که بتوانیم با استفاده از جاوااسکریپت روی canvas اشکال هندسی و طرح های گرافیکی خود را پیاده سازی کنیم. ابتدا canvas را با استفاده از getElementById توسط آی دی آن دریافت می کنیم و سپس با استفاده از getContext('2d') تمام توابع دوبعدی را به canvas خود اختصاص داده و در یک متغیری به نام c قرار می دهیم.
پشتیبانی مرورگرها از canvas
برای این که بتوانید با canvas کار کنید باید مرورگر شما از canvas پشتیبانی کند. برای این کار به سایت http://html5test.com بروید با ورود به این سایت، اطلاعاتی کاملی از مرورگر شما نمایش می دهد و مواردی که مرورگر شما پشتیبانی می کند را نمایش می دهد.
این مطلب را به اشتراک بگذارید...
نظر / سوال