Create clock with html5

For our new lesson I have prepared nice pure HTML5 clocks. This is pretty easy script, but it is very easy and impressive (as usual). Of course – anything necessary will be at canvas object.

Step 1. HTML

This is markup of our clocks. Here it is.

index.html

01<!DOCTYPE html>

02<html lang="en" >

03    <head>

04        <meta charset="utf-8" />

05        <title>HTML5 Clocks | Script Tutorials</title>

06        <link href="css/main.css" rel="stylesheet" type="text/css" />

07        <script src="http://code.jquery.com/jquery-latest.min.js"></script>

08        <script src="js/script.js"></script>

09    </head>

10    <body>

11        <header>

12            <h2>HTML5 Clocks</h2>

13            <a href="http://www.script-tutorials.com/html5-clocks/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>

14        </header>

15        <div class="clocks">

16            <canvas id="canvas" width="500" height="500"></canvas>

17        </div>

18    </body>

19</html>

Step 2. CSS

Here are all required stylesheets

css/main.css

1.clocks {

2    height: 500px;

3    margin: 25px auto;

4    position: relative;

5    width: 500px;

6}

Step 3. JS

js/script.js

01// inner variables

02var canvas, ctx;

03var clockRadius = 250;

04var clockImage;

05 

06// draw functions :

07function clear() { // clear canvas function

08    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

09}

10 

11function drawScene() { // main drawScene function

12    clear(); // clear canvas

13 

14    // get current time

15    var date = new Date();

16    var hours = date.getHours();

17    var minutes = date.getMinutes();

18    var seconds = date.getSeconds();

19    hours = hours > 12 ? hours - 12 : hours;

20    var hour = hours + minutes / 60;

21    var minute = minutes + seconds / 60;

22 

23    // save current context

24    ctx.save();

25 

26    // draw clock image (as background)

27    ctx.drawImage(clockImage, 0, 0, 500, 500);

28 

29    ctx.translate(canvas.width / 2, canvas.height / 2);

30    ctx.beginPath();

31 

32    // draw numbers

33    ctx.font = '36px Arial';

34    ctx.fillStyle = '#000';

35    ctx.textAlign = 'center';

36    ctx.textBaseline = 'middle';

37    for (var n = 1; n <= 12; n++) {

38        var theta = (n - 3) * (Math.PI * 2) / 12;

39        var x = clockRadius * 0.7 * Math.cos(theta);

40        var y = clockRadius * 0.7 * Math.sin(theta);

41        ctx.fillText(n, x, y);

42    }

43 

44    // draw hour

45    ctx.save();

46    var theta = (hour - 3) * 2 * Math.PI / 12;

47    ctx.rotate(theta);

48    ctx.beginPath();

49    ctx.moveTo(-15, -5);

50    ctx.lineTo(-15, 5);

51    ctx.lineTo(clockRadius * 0.5, 1);

52    ctx.lineTo(clockRadius * 0.5, -1);

53    ctx.fill();

54    ctx.restore();

55 

56    // draw minute

57    ctx.save();

58    var theta = (minute - 15) * 2 * Math.PI / 60;

59    ctx.rotate(theta);

60    ctx.beginPath();

61    ctx.moveTo(-15, -4);

62    ctx.lineTo(-15, 4);

63    ctx.lineTo(clockRadius * 0.8, 1);

64    ctx.lineTo(clockRadius * 0.8, -1);

65    ctx.fill();

66    ctx.restore();

67 

68    // draw second

69    ctx.save();

70    var theta = (seconds - 15) * 2 * Math.PI / 60;

71    ctx.rotate(theta);

72    ctx.beginPath();

73    ctx.moveTo(-15, -3);

74    ctx.lineTo(-15, 3);

75    ctx.lineTo(clockRadius * 0.9, 1);

76    ctx.lineTo(clockRadius * 0.9, -1);

77    ctx.fillStyle = '#0f0';

78    ctx.fill();

79    ctx.restore();

80 

81    ctx.restore();

82}

83 

84// initialization

85$(function(){

86    canvas = document.getElementById('canvas');

87    ctx = canvas.getContext('2d');

88 

89    // var width = canvas.width;

90    // var height = canvas.height;

91 

92clockImage = new Image();

93clockImage.src = 'images/cface.png';

94 

95    setInterval(drawScene, 1000); // loop drawScene

96});

I have defined main timer to redraw scene. Each step (tick) script defines current time, and draw clock arrows (hour arrow, minute arrow and second arrow).

html5 samples

Thursday, 17 April 2014

Create clock with html5

Step 1. HTML

index.html

Step 2. CSS

css/main.css

Step 3. JS

js/script.js

Create clock with html5

Post a Comment

No comments:

Post a Comment

About Us

Advertisment

Like Us