canvas – پروژه ساخت ساعت۲

نوشته شده توسط: adminدر تاریخ: خرداد ۰۵, ۱۳۹۵در: آموزشیبازدید: 971 بازدید

به قسمت دوم پروژه رسیدیم و میخوایم صورت یک ساعت رو با هم درست کنیم. درواقع هر ساعتی به یک صورت نیاز داره و برای ساختن اون ار توابع 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>