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

در هر قسمت از پروژه یک گوشه از کار رو انجام دادیم و هر دفعه یک قسمتشو ساختیم. در قسمت اول ظرف canvas مورد نیازمون رو ایجاد کردیم. سپس به ساختن چهره و شکل شمایل ساعتمون پرداختیم. در قسمت سوم هم اعداد ساعت و عقربه های اونو طراحی کردیم. در آخر قصد داریم این ساعت رو به کار بیاندازیم. در canvas – پروژه ساخت ساعت بخش پایانی ، ما با استفاده از canvas ها در HTML ساعت عقربه ایی یا آنالوگمون رو میسازیم پس با ما همراه باشین.
نکته: توجه داشته باشین که کدهای گفته شده در مقاله ها رو در ویرایشگر متن وارد کنید و اون هارو اجرا کنین تا نتیجه رو مشاهده کنین. راحتترین روش برای اینکار، کدها رو در Nodepad وارد کنین و فایل اونو با فرمت html. ذخیره کنین و بعد اونو با مرورگرتون اجرا کنین تا تغییرات انجام شده رو مشاهده کنین.

استارت ساعت:

در آخرین مرحله از پروژه تنها چیزی که لازمه انجام بدیم، فراخوانی تابع drawClock در توابعی که فواصل زمانی رو تنظیم میکند. یعنی تابع ;(setInterval(drawClock, 1000 را با تابع  ;()drawClock جایگزین می کنیم. توابع فاصله زمانی  darwClock رو 1000 بار در هر میلی ثانیه فرا خوانی میکنه. کد زیر به طور کامل یک ساعت رو با کمک JavaScript پیاده سازی میکنه:

<!DOCTYPE html>
<html>
<body>
<canvas id=”canvas” width=”400″ height=”400″

style=”background-color:#333″>
</canvas>
<script>
var canvas = document.getElementById(“canvas”);
var ctx = canvas.getContext(“2d”);
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90setInterval(drawClock, 1000);
function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
}
function drawFace(ctx, radius) {
var grad;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = ‘white’;
ctx.fill();
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
grad.addColorStop(0, ‘#333’);
grad.addColorStop(0.5, ‘white’);
grad.addColorStop(1, ‘#333’);
ctx.strokeStyle = grad;
ctx.lineWidth = radius*0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.fillStyle = ‘#333’;
ctx.fill();
}
function drawNumbers(ctx, radius) {
var ang;
var num;
ctx.font = radius*0.15 + “px arial”;
ctx.textBaseline=”middle”;
ctx.textAlign=”center”;
for(num = 1; num < 13; num++){
ang = num * Math.PI / 6;
ctx.rotate(ang);
ctx.translate(0, -radius*0.85);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius*0.85);
ctx.rotate(-ang);
}
}
function drawTime(ctx, radius){
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
//hour
hour=hour%12;
hour=(hour*Math.PI/6)+
(minute*Math.PI/(6*60))+
(second*Math.PI/(360*60));
drawHand(ctx, hour, radius*0.5, radius*0.07);
//minute
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
drawHand(ctx, minute, radius*0.8, radius*0.07);
// second
second=(second*Math.PI/30);
drawHand(ctx, second, radius*0.9, radius*0.02);
}
function drawHand(ctx, pos, length, width) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = “round”;
ctx.moveTo(0,0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos);
}
</script>
</body>
</html>

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

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

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

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