35
تشکر

ساخت تایمر دایره ای شکل با Canvas

تایمر دایره ای شکل با Canvas

تایمر دایره ای شکل با Canvas

امروز صبح زمانی که در اینترنت گشت و گذار همیشگی رو انجام میدادم به یک تصویری, از یک برنامه در سیستم عامل IOS (اگر اشتباه نکنم) برخورد کردم. این تصویر, شامل یک دایره بود که داخل آن عددی وجود داشت, اینجا بود که به ذهن من رسید یک تایمر دوار با استفاده از Canvas بسازم, که بالاخره در ساعت 9:12 دقیقه شب به نتیجه رسیدم.

در ادامه با ما همراه باشید…

از گفتن مطالب قدیمی پرهیز میکنم. برای آشنایی مقدماتی با Canvas ابتدا به مطلب “آموزش کار با Canvas” مراجعه کنید.

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

var animInterval = setInterval(function(){
  animStart();
}, 31.25);

در واقع برای ایجاد کردن انیمیشن ها در Canvas باید تغییراتی که میخواهید انجام دهید را پشت سرهم و به صورت سریع انجام دهید تا کاربر فکر کند که این واقعا یک انیمیشن است.

تابع setInterval باعث میشود که ما کارهای مشخصی را در مدت زمان معینی به صورت مداوم انجام دهیم. برای مثال در کد بالا من هر 31.25 میلی ثانیه تابع animStart را فراخوانی کردم. که اینکار باعث بوجود آمدن انیمیشن در نوار آبی رنگ خواهد شد.

الگوریتم این برنامه به این صورت است که در هر 31.25 میلی ثانیه مقدار مشخصی به مقدار درجه نوار آبی رنگ اضافه میکنیم. این مقدار مشخص بستگی به زمان دارد. این برنامه را دو تایم 60 ثانیه و 10 ثانیه آماده کردم.

شما میتوانید با اضافه کردن کدهای خود در تابع finishTime کارهایی که میخواهید بعد از تمام شدن تایمر انجام دهید را بنویسید.

میتوانید در زیر کدهای این کامل این برنامه را ببینید:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Circular Timer 10Sec</title>
	<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
	<style type="text/css">
	  *{
	    margin: 0 auto;
	    padding: 0;
	    outline: 0;
	    text-align: center;
	  }
	</style>
	<script type="text/javascript">
  	$(document).ready(function(){
  	  var canvas = document.getElementById('c-timer');
  	  var ctx = canvas.getContext('2d');
      var deg = 0;
      var time = 10;
      var radian = 0;
      var checkTime = 0;
      
      ctx.beginPath();
      ctx.arc(150, 150, 144, 0, Math.PI * 2, false);
      ctx.lineWidth = 6;
      ctx.strokeStyle = "#4d4d4d";
      ctx.stroke();
        
      var animInterval = setInterval(function(){
        animStart();
      }, 31.25);
      
      var toRadian = function (deg) {
        return deg * (Math.PI / 180);
      };
      
      var animStart = function () {
        checkTime++;
        if (checkTime == 32) {
          time -= 1;
        
          ctx.clearRect(90, 100, 130, 130);
          ctx.font = "Bold 100px Arial";
          ctx.textAlign = "center";
          ctx.fillStyle = "#4d4d4d";
          ctx.fillText(time, 150, 185);
          if (time === 0) {
            clearTimeout(animInterval);
            finishTime();
          }
          checkTime = 0;
        }
        
        deg += 1.125;
        radian = toRadian(deg);
        
        ctx.beginPath();
        ctx.arc(150, 150, 144, 0, radian, false);
        ctx.lineWidth=6;
        ctx.strokeStyle="#00a9ff";
        ctx.stroke();
      };
      
      var finishTime = function () {
        alert('Finish Time, Enjoy!!')
      };
    });
	</script>
</head>
<body>
	<canvas id="c-timer" width="300" height="300"></canvas>
</body>
</html>

نتیجه کار (در صورت ندیدن لطفا Edit on CODEPEN کلیک کنید و یا صفحه را دوباره باگذاری کنید و اینجا را ببینید):

  • آروین می‌گه:

    سلام
    واقعا وبتون عالیه متشکرم.
    فقط اگه راهی باشه که بشه رنگ هر نقطه از canvas رو بدست آورد، اونوقت خیلی راحت میتونیم فیلتر های گرافیکی زیبایی(مثل سیاه و سفید کردن) رو توی کانواس ایجاد کنیم البته این کار نیازمند اینه که بتونیم توی کانواس نقطه هم رسم کنیم.
    لطفا اگه این دو موردو(پیدا کردن رنگ و رسم نقطه) پیدا کرید، مطلبی هم برای آموزش این دوتا بگذارید تا ما هم مطلع بشیم.

  • mgh می‌گه:

    آموزش کاربردی خوبی بود لطفا آموزش های Canvas را ادامه دهید و با توضیحات بیشتر واقعاً توضیحات این آموزش کم بود؛ البته به زحمت شد کد ها را درک کرد و یادگرفت. با تشکر از شما

  • محمود می‌گه:

    من درست تر و کاربر پسند ترش کردم.اما ایدت جالب بود.بِچِه مِشَد :) بایه متغیر مستقل کاری کردم . تا کاربر یا یه تابع هر تایمی رو که دلش بخواد وارد کنه.من الان20 رو وراد کردم
    $(document).ready(function(){
    var canvas = document.getElementById(‘c-timer’);
    var ctx = canvas.getContext(‘2d’);
    var deg = 0;
    var time = 20;
    tt=time*18;
    var radian = 0;
    var checkTime = 0;

    ctx.beginPath();
    ctx.arc(150, 150, 144, 0, Math.PI * 2, false);
    ctx.lineWidth = 6;
    ctx.strokeStyle = “#4d4d4d”;
    ctx.stroke();

    var animInterval = setInterval(function(){
    animStart();
    }, 31.25);

    var toRadian = function (deg) {
    return deg * (Math.PI /tt);
    };

    var animStart = function () {
    checkTime++;
    if (checkTime == 32) {
    time -= 1;

    ctx.clearRect(90, 100, 130, 130);
    ctx.font = “Bold 100px Arial”;
    ctx.textAlign = “center”;
    ctx.fillStyle = “#4d4d4d”;
    ctx.fillText(time, 150, 185);
    if (time === 0) {
    clearTimeout(animInterval);
    finishTime();
    }
    checkTime = 0;
    }

    deg += 1.125;
    radian = toRadian(deg);

    ctx.beginPath();
    ctx.arc(150, 150, 144, 0, radian, false);
    ctx.lineWidth=6;
    ctx.strokeStyle=”#00a9ff”;
    ctx.stroke();
    };

    var finishTime = function () {
    alert(‘Finish Time, Enjoy!!’)
    };
    });


  • نظرات این مطلب بسته است.