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

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

MoisrexMoisrex.rozblog.com
زمان جاریtime : شنبه 16 تیر 1403 - 9:45 بعد از ظهر
نام کاربریusername : پسوردpassword : یاor عضویتregister | رمز عبور را فراموش کردمForgot your password?
شما در سایت ما ثبت نام نکرده اید و یا وارد اکانت کاربری خود نشده اید. از شما خواهشمند هستیم You are not log in to site. Please وارد شویدlogin یاor ثبت نام کنیدregister .
صفحه اصلیHome page / بررسی کد های جاوا اسکریپت (javascript) / آموزش ساخت انیمیشن دایره ها با تگ canvas
آموزش ساخت انیمیشن دایره ها با تگ canvas
تعداد بازدیدvisits : 555
monister آفلاین



ارسال هاAnswers : 1002
عضویتRegistration date : 18 /11 /1391
حمایت کردهThanks : 222
حمایت شدهThanked : 214
 آموزش ساخت انیمیشن دایره ها با تگ canvas

در

این پست یاد میگیرین چجوری با استفاده از تگ canvas یه انیمیشنی از دایره

های رنگی بسازید . همان طور که میدونین (یا شایدم نمیدونین :دی) کنواس

canvas یکی از تگ های HTML5 هستش که به ما یه محدوده ی خالی برای نقاشی

ایجاد میکنه .

کد:

function choicecolor(){

var colorsparameters='0123456789ABCDEF'.split(''),

colorok='',

i=0;

while(i<6){

colorok+=colorsparameters[parseInt(Math.random()*16)]

i++

}

return '#'+colorok;

}

من اینجا از حلقه ی while استفاده کردم چون عشقم می کشید :دی ولی میتونین از حلقه ی for هم استفاده کنین زیاد با هم فرق ندارن .

خب این تابع برای ما رنگ تصادفی به صورت هگز درست میکنه ...

حالا قسمت دایره های انیمیشنمونو می نویسیم

کد:
function pathcircle(){

var randomx = {

x:Math.floor(Math.random()*1200),

y:Math.floor(Math.random()*500)

}

var can = document.getElementById('mycan');

var ctx = can.getContext('2d');

ctx.beginPath();

ctx.arc(randomx.x,randomx.y,50,0,Math.PI*2,false);

ctx.fillStyle=choicecolor();

ctx.fill();

}

دایره هامونو هم داخل یه تایع به اسم pathcircle میذاریم .

در

خط بعدی یه object تعریف کردیم که x یه عدد تصادفی بین 0 و 1200 گرفته و y

یه عدد تصادفی بین 0 تا 500 گرفته که برای position های دایره ها استفاده

میکنیم توجه کنید اینارو داخل setInterval قرار دهید نه خارج از آن .

دلیل ؟ چون با هر بار اجرا شدن عدد های مختلفی در متغیر های x , y ذخیره میشه ...

خب بقیه کار ها شم معلومه دیگه ... arc برای کشیدن کمانه و Math.PI*2 هم مخفف کد زیره:

کد:
var degress=45;

var radians=(Math.PI / 180) * degress;

البته نمیشه گفت مخفف در اصل برای تبدیل درجه به رادیان از کد بالا استفاده میکنیم ...

در

این قسمت ctx.fillStyle=choicecolor رنگ دایره ها رو برابر با رنگی که از

تابعchoicecolor بدست میاد گذاشتیم . و با ctx.fill دایره رو کشیدیم

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

کد:
setInterval('pathcircle()',2000);

در نهایت ما همچین چیزی کدنویسی کردیم :

کد و دمو

موفق باشید

Instead of success in a base I hate, I prefer to loose in a base I enjoy
MY website : Www.Monister.Ir
My Love Blog : Www.Ehsan-Gomnam.BLOGFA.com
دوشنبه 15 دی 1393 - 22:49
وب کاربرUser's blog ارسال پیامsend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
حمایت شده حمایت شدهThanks : سپاس هاThanks (3) : amalian - smaeal - masterhk -
admin آفلاین


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

اینم یه جور دیگه اش با یه تغییر کوچیک

با تشکر

!Whatever you DISRESPECT, you'll never have the ability to ACCESS
دوشنبه 15 دی 1393 - 23:12
وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
حمایت شده حمایت شده: سپاس هاThanks (4) : monister - amalian - smaeal - masterhk -
monister آفلاین



ارسال‌هاAsnwers : 1002
عضویتRegistration date : 18 /11 /1391
حمایت کردهthanks : 222
حمایت شدهThanked : 214
 پاسخAnswer 2 : آموزش ساخت انیمیشن دایره ها با تگ canvas

این جالب تر شد :P
Instead of success in a base I hate, I prefer to loose in a base I enjoy
MY website : Www.Monister.Ir
My Love Blog : Www.Ehsan-Gomnam.BLOGFA.com
دوشنبه 15 دی 1393 - 23:18
وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
حمایت شده حمایت شده: سپاس هاThanks (1) : smaeal -
smaeal آفلاین



ارسال‌هاAsnwers : 10648
عضویتRegistration date : 18 /11 /1392
حمایت کردهthanks : 18906
حمایت شدهThanked : 5424
 پاسخAnswer 3 : آموزش ساخت انیمیشن دایره ها با تگ canvas

دم هر دوتون گرم...

ولی خداییش این canvas هم عالمیه برای خودشا!!!

با تشکر

===================================================
☼برای تشکر از دکمه « سپاسگزارم » استفاده نمایید☼
سه شنبه 16 دی 1393 - 07:53
وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
masterhk آفلاین



ارسال‌هاAsnwers : 378
عضویتRegistration date : 22 /4 /1394
حمایت کردهthanks : 254
حمایت شدهThanked : 519
 پاسخAnswer 4 : آموزش ساخت انیمیشن دایره ها با تگ canvas

سلام. ممنون جالب شده... :)

راستی مویزرکس اون پست رو که فرستادم دیدیش؟؟

کی تاییدش میکنی؟؟
سه شنبه 16 دی 1393 - 11:11
ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport



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