بخش مقالات آکادمی | Articles
آخرین آموزش ها

در این مقاله قصد داریم عنصری رو در HTML5 بهتون معرفی کنیم که با اون بتونین به ترسیمات گرافیکی در اون بپردازین. پیشتر ازین تگ یا عنصر در مقاله بازی سازی با HTML صحبت کردیم حالا میخوایم بطور مفصل درباره اون براتون توضیح بدیم امیدواریم مطالب این مقاله به دردتون بخوره.

Canvas

این عنصر به معنای بوم هست و همونطور که از اسمش پیداست، همانند یک بوم نقاشی میتونیم درون به کمک JavaScript شکلهای گرافیکی ایجاد کنیم. دراین بوم شما علاوه بر رسم های گرافیکی میتونین نوشته های رنگی متحرک یا ثابت پیاده سازی کنید. عنصر canvas به صورت run time بوده و به تک تک پیکسل های اون دسترسی دارین. درواقع  داخل این عنصر دارای مختصات می باشد به طوریکه گوشه سمت چپ بالا مختصات اون (0و0) هستش. که با استفاده از این خاصیت میتونین در داخل بومتون رویدادهای لازمه برای به عنوان مثال؛ کلید، پیاده سازی کنین.
توجه داشته باشید که مرورگرهای Internet Explorer 9+, Firefox, Opera, Chrome, Safari این عنصر را پشتیبانی می کنند به جز Internet Explorer 8.
canvas ها را به شکل زیر دز کد های HTML پیاده سازی میکنند:

<canvas id=myCanvaswidth=200height=100“></canvas>

ما به کمک id اونو به  JavaScript ارجاع میدیم و توسط width و height اندازه ایی براش مشخص میکنیم. ما میتونیم چندین canvas در قالبمون ایجاد کنیم. همچنین در نظر داشته باشین که به طور پیشفرض برای این عنصر حاشیه ایی (border) درنظر گرفته  نشده. ما با استفاده از کد های CSS یک حاشیه برای canvas تعبیه میکنیم:

canvas id=myCanvaswidth=200height=100>
<“;style=border: 1px  solid  #000000
<canvas/>

رسم کردن در بوم توسط JavaScript:

ما در HTML تمام رسم ها رو توسط JavaScript انجام میدیم. در این بخش قصد داریم رسم کردن در canvas رو گام به گام توضیح بدیم:
گام اول:

ابتدا ما باید عنصر <canvas> رو در کد html معرفی کنیم و این کارهم با استفاده از متد ()getElementById که در HTML DOM (مدل شی گرایی سندی) وجود داره، استفاده میکنیم.

;(“var canvas = document.getElementById(“myCanvas

گام دوم:

در این مرحله نیاز داریم که یک شی در canvas رسم کنم. ما توسط ()getContext تمام خواصی که برای رسم نیاز داریم رو فراهم میکنیم:

(“var ctx = canvas.getContext(“2d

گام سوم:

درنهایت ما میتونیم رسممون رو کامل کنیم و رنگ اونو با کد زیر تغییر بدیم. همچنین میتونیم توسط کد زیر پترن و گرادینت ایجاد کنیم. به صورت پیش فرض fillstyle به رنگ مشکی هست.

“;ctx.fillStyle = “#FF0000

توسط ( fillRect(x,y,width,height ما روی canvas یک مستطیل ایجاد میکنیم.

;(ctx.fillRect(0,0,150,75

با ترکیب کدهای بالا ما اولین canvas به همراه اولین رسم ایجاد کردیم.

<!DOCTYPE html>
<html>
<body>

“canvas id=”myCanvas” width=”200″ height=”100>
<“;style=”border:1px solid #c3c3c3
Your browser does not support the canvas element.
<canvas/>

<script>
;(“var canvas = document.getElementById(“myCanvas
;(“var ctx = canvas.getContext(“2d
;”ctx.fillStyle = “#FF0000
;(ctx.fillRect(0,0,150,75
<script/>

<body/>
<html/>

امیدوارم این مقاله بدرتون خورده باشه و مارو در مقاله های بعدی در این زمینه همراهی کنین.

تاریخ ارسال
26 اردیبهشت 1395
ارسال شده توسط
محمدرضا تناکیان
میزان بازدید
311 نفر بازدیدکننده
0 دیدگاه
فایلی جهت دانلود وجود ندارد !
مشخصات
حجم و فرمت :

0 دیدگاه ثبت شده

شما هم نظری بدهید
هنوز دیدگاهی ثبت نشده
توجه فرمایید:
نظرات شما پس از بررسی و تایید نمایش داده می شود.
لطفا نظرات خود را فقط در مورد مطلب بالا ارسال کنید.