به قسمت دوم پروژه رسیدیم و میخوایم صورت یک ساعت رو با هم درست کنیم. درواقع هر ساعتی به یک صورت نیاز داره و برای ساختن اون ار توابع JavaScript استفاده میکنیم.
نکته: توجه داشته باشین که کدهای گفته شده در مقاله ها رو در ویرایشگر متن وارد کنید و اون هارو اجرا کنین تا نتیجه رو مشاهده کنین. راحتترین روش برای اینکار، کدها رو در Notepad وارد کنین و فایل اونو با فرمت html. ذخیره کنین و بعد اونو با مرورگرتون اجرا کنین تا تغییرات انجام شده رو مشاهده کنین.
ابتدا یک تابع به نام ()drawface برای ترسیم صورت ساعت ایجاد میکنیم.
function drawClock() {
drawFace(ctx, radius);
}
function drawFace(ctx, radius) {
}
سپس یک دایره سفید رسم میکنیم:
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);
3 توقف رنگ متناظر با داخل،وسط و لبه بیرونی ایچاد میکنیم. توقف رنگ به ساعتمون جلوه سه بعدی میده:
grad.addColorStop(0, ‘#333’);
grad.addColorStop(0.5, ‘white’);
grad.addColorStop(1, ‘#333’);
ذر این مرحله گرادینت رو به عنوان شیئ stroke style برای ترسیم تعریف میکنیم.
ctx.strokeStyle = grad;
همچنین عرض خط (line width) رو ۱۰% شعاع برای شیئ رسم تعریف میکنیم:
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();
با ترکیب توابع و متدهای بالا ما تونستیم صورت ساعتمون رو بسازیم.
<!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);
}
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();
}
</script>
</body>
</html>
به پایان مقاله “canvas – پروژه ساخت ساعت۲″ رسیدیم. درقسمت های بعدی قصد تکمیل کردن این پروژه رو باهم داریم. ازهمراهیتون سپاسگذاریم.
نوشته canvas – پروژه ساخت ساعت۲ اولین بار در LeanFiles.Com Academy – Online Training Courses پدیدار شد.
مبنع این خبر (برای مشاهده متن کامل خبر لینک زیر را بزنید):
LeanFiles.Com Academy – Online Training Courses