تبلیغات متنی و بنر

آموزش HTML 5 > طراحی اشیای گرافیکی در HTML 5  >  تگ < canvas >

تگ < canvas > :

از تگ < canvas > در Html 5 برای طراحی اشیا و اشکال گرافیکی بصورت Run Time به کمک زبان های اسکریپتی مثل مثل جاوا اسکریپت استفاده می شود . بوسیله تگ < canvas > شما می توانید اشیای گرافیکی مثل مربع ، دایره ، تصاویر و ... را بر روی صفحه ایجاد نمایید . تگ < canvas > خود به تنهایی خروجی بر روی صفحه نداشته و فقط به عنوان یک نگهدارنده برای اشیای گرافیکی استفاده می شود . عمل طراحی اشکال بوسیله جاوا اسکریپت انجام می شود .

شکل کلی استفاده از تگ  < canvas > بصورت زیر است :

syntax <canvas  id = " id " > </canvas>

syntax توضیح
توضیح Parameter
این پارامتر تعیین کننده شناسه یا id تگ در صفحه است .
حتما این پارامتر را برای تگ < canvas > تعیین نمایید ، زیرا به وسیله آن می توان در اسکریپت ها و سایر صفحه ، به تگ مورد نظرتان دسترسی داشته باشید . 		id

پشتیانی در مرورگر های مختلف ::

این تگ در تمام مرورگرهای اصلی پشتیبانی می شود .

نکته : اگر مرورگر از تگ < canvas > پشتیبانی نکند ، متن ( Text) که درون آن وجود دارد ،  به جای شکل گرافیکی نمایش داده می شود .
نکته 2 : تگ < canvas > در Html 5 جدید است .

خواص تگ < canvas > :

در لیست زیر ، خواص تگ < canvas > نشان داده شده اند :

< canvas > خواص تگ
توضیح خاصیت
این خاصیت ارتفاع شکل هندسی را تعیین می کند . height
این خاصیت عرض شکل هندسی را تعیین می کند . width

مثال عملی :

مثال : در مثال زیر یک تگ < canvas > را با id برابر MyCanvas ، تعریف کرده ایم . سپس به وسیله یک اسکریپت آن تگ را فراخوانی کرده و با استفاده از متدهای خاصی ، شکلی را برای آن طراحی کرده ایم .
برای آشنایی با نحوه طراحی شکل به کمک اسکرپیت ها ، به نحوه کار با تگ < canvas > بروید :

Example
<canvas id="MyCanvas" height="100px" width="100px">
      اگر مرورگر از این تگ پشتیانی نکند ، این متن نمایش داده می شود
</canvas>

<script type="text/javascript">
       var canvas = document.getElementById('MyCanvas');
       var ctx = canvas.getContext('2d');
       ctx.fillStyle = '#FF0000';
       ctx.fillRect(0, 0, 80, 100);
</script> 		کد
اگر مرورگر از این تگ پشتیانی نکند ، این متن نمایش داده می شود خروجی

راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی

نظر خودتان درباره این صفحه را با ما در میان بگذارید  :

آیا مطالب این صفحه برای شما مناسب و مفید بود ه است :

نام :               
آدرس Email :  

نظر شما :  

سوال امنیتی : جمع سه + پنج چنده ؟