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

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

ترسیم اعداد ساعت :

ابتدا اندازه فونت رو 15% شعاع در شیئ ترسیم کننده تنظیم میکنیم:

ctx.font = radius*0.15 + “px arial”;

چینش متن رو وسط و مرکز نقطه ی چاپ اون تنظیم میکنیم:

ctx.textBaseline=”middle”;
ctx.textAlign=”center”;

در آخر به محاسبه نقطه چاپ اون می رسیم. برای هر 12 شماره به اندازه 85% شعاع، PI/6 میچرخونیم:

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);
}

اگر تمام کدهای بالا را باهم ترکیب کنیم، خواهیم دید که یک ساعت نمادار محتوی شماره خواهیم داشت:

<!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.90drawClock();
function drawClock() {
drawFace(ctx, radius);
drawNumbers(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);
}
}
</script>
</body>
</html>

ترسیم عقربه های ساعت :

همه ساعت ها (ساعت های آنالوگ) نیاز به عقربه دارند تا نشون دهنده زمان باشند. ماهم قصد داریم عقربه های ساعت رو پیاده سازی کنیم. برای اینکار از متد ()Date ساعت و دقیقه و ثانیه رو میگیریم :

var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();

سپس زاویه عقربه ساعت رو محاسبه میکنیم و طول اون رو با 50% شعاع و عرضشو 7% شعاع ترسیم میکنیم:

 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);

از همین تکنیک برای دقیقه و ثانیه استفاده میکنیم. در آخر توسط متد ()drawHand خطی که طول و عرض اون داده شده بعنوان عقربه ترسیم میکنیم. کد زیر عقربه ها رو هم به ساعتمون اضافه میکنه:

<!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.90
drawClock();
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>

همچنان از همراهی شما کمال تشکر رو داریم.

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

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

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