لود شدن افکت

این تاپیک 55 پاسخ و 3 مشارکت کننده دارد . آخرین آپدیت توسط :  N4H ،‏ 1 سال و 4 ماه پیش .

این تاپیک تاکنون 7330 بازدید داشته است .

تگ شده :  

نویسنده پست
جمعه ، 25 جولای 2014     3:11 ب.ظ #


مانی تهرانی

Subscriber
45 پست16 تاپیک

سلام آقای اسفندیاری

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

در ضمن من میخوام که اون خطوط از بالا بریده شوند و با لبه ی اون خط طوسی رنگ برابر شوند دقیقا مثل تصویر

چکار باید بکنم؟

دوستان دیگه هم اگه می تونن کمک کنند ممنون میشم.

کد:

$(document).ready(function () {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var loop = setInterval(draw, 100);
var count = 0;
function draw() {
var sAngle = Math.floor(Math.random() * 361) * Math.PI / 180;
var eAngle = Math.floor(Math.random() * 361) * Math.PI / 180;
var radius = Math.floor(Math.random() * 1100) + 400;
var lwidth = Math.floor(Math.random() * 20);
context.beginPath();
context.arc(centerX, centerY, radius, sAngle, eAngle, false);
context.lineWidth = lwidth;
context.strokeStyle = 'maroon';
context.stroke();
count++;
if (count == 40) {
clearInterval(loop);
}
}
});

عکس جهت یاد آوری:

 

پیوست ها:
You must be logged in to view attached files.
0  تشکر
جمعه ، 25 جولای 2014     4:24 ب.ظ #


محمد اسفندیاری

Authorplus
VIP
817 پست10 تاپیک

دوست عزیز دیگه این راحته.......باید تو رویداد load فرمتون کدهای مورد نظر رو قرار بدین......در مورد اون خطوط طوسی منظورتون رو متوجه نشدم!!1

1  تشکر
جمعه ، 25 جولای 2014     4:50 ب.ظ #


مانی تهرانی

Subscriber
45 پست16 تاپیک

منظورم اون خط عمودی هست که کنارش یک سری Li مثل Home,..... قرار داره اگه توجه کنید در عکس  می بینید که بالاترین لبه ی خطوط دورانی نسبت به لبه ی بالای خط عمودی طوسی رنگ گفته شده برابر است.

عکس را نشانه گذاری کردم

لطفا عکس جدید را باز کنید:

 

پیوست ها:
You must be logged in to view attached files.
0  تشکر
جمعه ، 25 جولای 2014     4:54 ب.ظ #


مانی تهرانی

Subscriber
45 پست16 تاپیک

در ضمن من کدها رو داخل لود فرم نوشتم ولی منظورم این بود که خطوط دورانی قرمز رنگ در هنگام لود شدن فرم یکی یکی ترسیم نشوند و کل خطوط یکدفعه fade شوند.

ممنون.

0  تشکر
جمعه ، 25 جولای 2014     6:23 ب.ظ #


محمد اسفندیاری

Authorplus
VIP
817 پست10 تاپیک

برای یکدفعه fade شدن از کد زیر استفاده کنید :

Document

Your browser can not support canvas element.

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;

// var loop = setInterval(draw, 0);

for (var i = 1; i <= 40; i++) {
draw();
}
// var count = 0;

function draw() {
var lwidth = Math.floor(Math.random() * 8);
var cx = Math.floor(Math.random() * 500) + 220;
var cy =400;

context.beginPath();
// context.arc(centerX, centerY, radius, sAngle, eAngle, false);
ellipse(context, centerX,centerY,cx,cy);
context.lineWidth = lwidth;
context.strokeStyle = 'maroon';
context.stroke();
// count++;
// if (count == 30) {
// clearInterval(loop);
// }
}
function ellipse(context, cx, cy, rx, ry){
var sAngle = Math.floor(Math.random() * 361) * Math.PI / 180;
var eAngle = Math.floor(Math.random() * 361) * Math.PI / 180;

context.save(); // save state
context.beginPath();

context.translate(cx-rx, cy-ry);
context.scale(rx, ry);
context.arc(1, 1, 1, sAngle, eAngle, false);

context.restore(); // restore to original state
context.stroke();
}

1  تشکر
جمعه ، 25 جولای 2014     6:25 ب.ظ #


محمد اسفندیاری

Authorplus
VIP
817 پست10 تاپیک

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

درضمن در مورد اون خط طوسی که فرمودین نمیدونم که چی ازم میخواین؟؟باید چیکارش کنم؟؟؟ببخشید که منظورتونو نمیگیرم

پیوست ها:
You must be logged in to view attached files.
1  تشکر
جمعه ، 25 جولای 2014     7:04 ب.ظ #


مانی تهرانی

Subscriber
45 پست16 تاپیک

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

تصویر ضمیمه:

 

پیوست ها:
You must be logged in to view attached files.
0  تشکر
جمعه ، 25 جولای 2014     7:28 ب.ظ #


محمد اسفندیاری

Authorplus
VIP
817 پست10 تاپیک

ببین حالا خوبه یا نه

پیوست ها:
You must be logged in to view attached files.
1  تشکر
جمعه ، 25 جولای 2014     7:33 ب.ظ #


مانی تهرانی

Subscriber
45 پست16 تاپیک

بله فقط شکل و شمایلش مثل همون قبلی که درست کرده بودین بشه

میشه کد جاوا اسکریپت اصلاخ شده را برام بفرستین؟

ممنون.

0  تشکر
جمعه ، 25 جولای 2014     7:38 ب.ظ #


مانی تهرانی

Subscriber
45 پست16 تاپیک

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

چون می خواستم وقتی فرم لود شد خطوط دورانی شروع به ترسیم شدن نشوند و کل خطوط یکدفعه fade شوند و به عبارتی دیگر ثابت بمانند.

ممنون.

0  تشکر
پست 1 تا 10 (از مجموع 56 پست)

برای پاسخ دادن به این تاپیک باید وارد سایت شوید .