[2015.12.14] CSS3 시계 디자인 - pie time, html5 canvas 함수 예제

원형 시계 디자인입니다.

작동원리는 간단하지요.

0.5초마다 시계 그리기 함수를 실행하여 시,분,초 각각 그려줍니다.

이렇게요

var t = setInterval( 'updateTime()', 50 );

그리는 방법은 보시다시피 canvas 를 이용하였군요.

updateTime 함수의 내용을 보면 createRadialGradient, addColorStop, shadowColor 등등 canvas 관련 함수들이 보이네요

function updateTime(){
    var currentDate = new Date();
    var g = $.createRadialGradient(250,250,.5,250,250,250);  
  g.addColorStop(0, 'hsla(180, 55%, 8%, 1)');  
  g.addColorStop(1, 'hsla(180, 95%, 15%, 1)');  
    $.fillStyle = g;
    $.fillRect( 0, 0, c.width, c.height );
    currentSec = currentDate.getSeconds();
    currentMillisec = currentDate.getMilliseconds();
    currentMin = currentDate.getMinutes();
    currentHr = currentDate.getHours();
    if(currentHr == 00){  //if midnight (00 hours) hour = 12
    currentHr=12;
  }
  else if (currentHr >= 13 ){  //convert military hours at and over 1300 (1pm) to regular hours by subtracting 12. 
    currentHr -=12;
  }
    drawSeconds();
    drawMinutes();
    drawHours();
    var realTime = currentHr + ':' + numPad0( currentMin ) + ':' + numPad0( currentSec );

  /*Here is the selected option of creating the text within the pie canvas elemenet */

    var textPosX = 250 - ( $.measureText(realTime).width / 2 );
  $.shadowColor = 'hsla(180, 100%, 5%, 1)';
  $.shadowBlur = 100;
  $.shadowOffsetX = 12;
  $.shadowOffsetY = 0;
    $.fillStyle =  'hsla(255,255%,255%,.7)';
    $.font = "bold 1.6em 'Noto Serif', serif";
    $.fillText( realTime, textPosX, c.height/2+50);

}

​

오늘은 canvas의 함수들을 좀 간단하게 살펴봐야겠습니다.

○ 브라우저 지원

Element	크롬	IE	파이어폭스	사파리	오페라
<canvas>	4.0	9.0	2.0	3.1	9.0

---

직선 그리기

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

---

원 그리기

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

---

글자 그리기

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);

---

글자 외곽선 그리기

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);

---

선형 그라디언트 그리기

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);

---

원형 그리디언트 그리기

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);

---

이미지 그리기

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);

---

출처 : HTML5 Canvas - W3Schools

간단한 사용 예제 및 Demo

See the Pen Pie Time by Tiffany Rayside (@tmrDevelops) on CodePen.