::: در حال بارگیری لطفا صبر کنید :::Loading , please wait ...

انجمن کدستانMoisrex

MoisrexMoisrex.rozblog.com
زمان جاریtime : شنبه 16 تیر 1403 - 9:22 بعد از ظهر
نام کاربریusername : پسوردpassword : یاor عضویتregister | رمز عبور را فراموش کردمForgot your password?
شما در سایت ما ثبت نام نکرده اید و یا وارد اکانت کاربری خود نشده اید. از شما خواهشمند هستیم You are not log in to site. Please وارد شویدlogin یاor ثبت نام کنیدregister .
12»
آموزش HTML5 | تگ Canvas
تعداد بازدیدvisits : 1571
amirmohsen آفلاین




ارسال هاAnswers : 3175
عضویتRegistration date : 20 /11 /1391
حمایت کردهThanks : 610
حمایت شدهThanked : 1228
آموزش HTML5 | تگ Canvas

سلام،این هم آموزش:

ایجاد بوم:

میتوانید مکانی از صفحه را به عنوان بوم تعیین کنید تا شکل ها وخط ها را رسم کنید، و عکس و متن اضافه کنید.

این ناحیه را با تگ تعریف خواهید کرد. میتوانید ابعاد بوم را توسط صفت Width و Height تعیین کنید.

این تگ به تنهایی عنصری را رسم نمی کند! بلکه فضایی از صفحه را مشخص میکند که شما میتوانید با استفاده

از کدهای جاوااسکریپت در آن نقاشی بکشید. تگ Canvas یکی از تگ های HTML5 است.

آموزش ایجاد بوم:

درمکان مورد نظر خود عبارت زیر را تایپ کنید:

کد:
<canvas></canvas>

سپس عبارت:

کد:
Id="?"

را در روبروی آن تایپ نمایید....

با استفاده از صفت های زیر می توانید ابعاد آن را مشخص کنید:

کد:
width="اندازه مورد نظرpx" height="اندازه مورد نظرpx"

با این آموزش به راحتی توانستید یک بوم بسازید!

منبع: لینک

:)
دوشنبه 15 مهر 1392 - 15:39
وب کاربرUser's blog ارسال پیامsend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
connor آفلاین



ارسال‌هاAsnwers : 253
عضویتRegistration date : 8 /11 /1391
حمایت کردهthanks : 71
حمایت شدهThanked : 330
پاسخAnswer 1 : آموزش HTML5 | تگ Canvas

حالا بووووم چی چی هست؟


دوشنبه 15 مهر 1392 - 17:36
ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
god-of-dance آفلاین



ارسال‌هاAsnwers : 159
عضویتRegistration date : 15 /7 /1392
حمایت کردهthanks : 7
حمایت شدهThanked : 45
پاسخAnswer 2 : آموزش HTML5 | تگ Canvas

واقعا حالا بوم چی هستش؟


(طراحی رایگانــــــــ قالب برای شما / مسابقه کلیک کنید. )
[پیـــــک نیـــــک]

[بـــــلاگ جـــام]
(طراحی حرفه ای قالب های وبلاگدهی و شاید وردپرس در دو سایت بالا)
(طراحی فوق حرفه ای بنر , لوگو , و . . . . در بلاگ جام با قیمتی ارزان و کیفیت بالا)
دوشنبه 15 مهر 1392 - 17:41
وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
erfanlink آفلاین



ارسال‌هاAsnwers : 1688
عضویتRegistration date : 11 /10 /1391
حمایت کردهthanks : 3284
حمایت شدهThanked : 598
پاسخAnswer 3 : آموزش HTML5 | تگ Canvas

لطفا یک دمو بزار

دوشنبه 15 مهر 1392 - 17:55
وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
admin آفلاین


مدیریت

ارسال‌هاAsnwers : 7209
عضویتRegistration date : 18 /10 /1390
حمایت کردهthanks : 4361
حمایت شدهThanked : 3281
پاسخAnswer 4 : آموزش HTML5 | تگ Canvas

کار با تگ canvas ساده نیست.

بدون جاوا اسکریپت اصلا این تگو یاد نگیرین بهتره ...

توی مرورگر های قدیمی هم عمل نمی کنه ...

در اصل یه عکس هست که میشه با جاوا اسکریپت توش نقاشی کرد.

همین ابزار آخری که داخلش متن می نویسی تبدیل به کاراکترش می کنه قبل از این که تبدیل به کاراکتر بکنه اول متن رو می نویسه توی canvas بعد اون عکس رو تبدیل به کاراکتر می کنه اینطوری که هر جاش رنگی غیر از سفید بود یه کاراکتر میذاره هر جاش یه چیز دیگه بود یه کاراکتر دیگه میذاره

به خاطر همین اون ابزار از همه زبون ها و کاراکتر ها و فونت هایی که توی کامپیوترتون نصب هست پشتیبانی می کنه.

با تشکر


!Whatever you DISRESPECT, you'll never have the ability to ACCESS
دوشنبه 15 مهر 1392 - 18:21
وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
حمایت شده حمایت شده: سپاس هاThanks (1) : erfanlink -
amirmohsen آفلاین




ارسال‌هاAsnwers : 3175
عضویتRegistration date : 20 /11 /1391
حمایت کردهthanks : 610
حمایت شدهThanked : 1228
پاسخAnswer 5 : آموزش HTML5 | تگ Canvas

ممنون که توضیح دادید!

الان جاواش رو هم میزارم...

:)
دوشنبه 15 مهر 1392 - 18:59
وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
amirmohsen آفلاین




ارسال‌هاAsnwers : 3175
عضویتRegistration date : 20 /11 /1391
حمایت کردهthanks : 610
حمایت شدهThanked : 1228
پاسخAnswer 6 : آموزش HTML5 | تگ Canvas

این کد تستر: لینک

خب پس از ایجاد بوم (توضیح دادم :دی)

باید زیر کدی که در بالا اموزش دادم تگ اسکریپت رو بنویسید و توش اینو کپی کنید:

کد:
Var canv= document.getElementById('آیدی که در آموزش بالا گفتم');

Var ctx = canv.getContext('2d');

سپس تگ اسکریپت را ببندید.

حالا که اینو نوشتید اگر یکمی سی اس اس بلد باشید میتونید به راحتی براش استایل بزارید!

مثل مثال زیر:

کد:
<style>

canvas#webtools{border:1px solid #333;}

</style>

<canvas Id="webtools" Width="200px" height="100px"></canvas>

<script>

Var canv= document.getElementById('webtools');

Var ctx = canv.getContext('2d');

</script>

:)
دوشنبه 15 مهر 1392 - 19:09
وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
admin آفلاین


مدیریت

ارسال‌هاAsnwers : 7209
عضویتRegistration date : 18 /10 /1390
حمایت کردهthanks : 4361
حمایت شدهThanked : 3281
پاسخAnswer 7 : آموزش HTML5 | تگ Canvas

اینم مثال براتون یکی ساختم ببینید منظورم چیه: کلیک


!Whatever you DISRESPECT, you'll never have the ability to ACCESS
دوشنبه 15 مهر 1392 - 19:36
وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
design7 آفلاین



ارسال‌هاAsnwers : 19
عضویتRegistration date : 7 /6 /1392
حمایت کردهthanks : 12
حمایت شدهThanked : 3
پاسخAnswer 8 : آموزش HTML5 | تگ Canvas

اینم ی مثال دیگ البته ی شکل سادست

برای مشاهده کلیک کنید

سه شنبه 16 مهر 1392 - 00:41
ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
admin آفلاین


مدیریت

ارسال‌هاAsnwers : 7209
عضویتRegistration date : 18 /10 /1390
حمایت کردهthanks : 4361
حمایت شدهThanked : 3281
پاسخAnswer 9 : آموزش HTML5 | تگ Canvas

اینم به افتخار خودم :دی

کلیک


!Whatever you DISRESPECT, you'll never have the ability to ACCESS
سه شنبه 16 مهر 1392 - 13:34
وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
admin آفلاین


مدیریت

ارسال‌هاAsnwers : 7209
عضویتRegistration date : 18 /10 /1390
حمایت کردهthanks : 4361
حمایت شدهThanked : 3281
پاسخAnswer 10 : آموزش HTML5 | تگ Canvas

درضمن کپی برداری از اون دو کدی که دادم فقط با درج لینک منبع مجاز می باشد.

به اسم خودتون هم نزنیدش

با تشکر


!Whatever you DISRESPECT, you'll never have the ability to ACCESS
سه شنبه 16 مهر 1392 - 13:35
وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
12»



moisrex
درباره ماAbout us لینک های ماOur links کلمات کلیدیKeywords
انجمن تخصصی کدستان ، ساخته شده توسط فردی با نام مستعار Moisrex می باشد.This forum designed by a person who called Moisrex.

ایمیلE-mail : Moisrex @ Gmail.com
کدستان,انجمن کدستان,کدنویسی,انجمن پشتیبانی,فروم,رزبلاگ,آموزش کدنویسی,درخواست کد
تمامی حقوق این انجمن مربوط به همین انجمن می باشد | طراحی قالبCopyright (c) By Moisrex , All rights reserved | Desiger : Moisrex