Sunday, 6 September 2020

CSS Clock With Polar Model

CSS Clock With Polar Model

CSS Clock With Polar Model
Sunday, 6 September 2020

The first article in this new year, I will make a simple article, which is to make a 'Polar Clock' like the image below.

I got this script from github / pritipg which is inspired by Raphael JS.
now to see the original script / demo see below


for the script / demo modif from pritipg that I got from github, see below.


well, here I only changed a little from the pritipg,
I only changed the color and changed the time to 24 hours, which previously was only 12 hours, because our country uses 24 hours duration.

just get to the point.
add this CSS to your web / blog

* {
 margin: 0;
 padding: 0;
}
canvas {
 background: #ecf0f1;
 font-family: "Orbitron", sans-serif;
}

Next, add this JS to your website or blog.

var canvas = document.querySelector("canvas")
var ctx = canvas.getContext("2d")

canvas.style.width = window.innerWidth + "px"
canvas.style.height = window.innerHeight + "px"

canvas.width = window.innerWidth
canvas.height = window.innerHeight

var centerX = canvas.width / 2
var centerY = canvas.height / 2

var date = new Date()
var seconds = date.getSeconds()
var minutes = date.getMinutes()
var hours = date.getHours()

if (hours > 23)
    hours -= 24

var PI  = Math.PI
var cos = Math.cos
var sin = Math.sin

function draw() {
    clearScreen()
    
    drawHand(200, (2 * PI / 60) * seconds, "#002b36")
    drawHand(150, (2 * PI / 60) * minutes, "#34495e")
    drawHand(100, (1.6 * PI / 24) * hours,   "#3498db")

    drawTime(hours, minutes, seconds)
  
    update()    
}

function drawHand(radius, theta, color, width) {
    width = width || 35
    
    ctx.beginPath()
    ctx.arc(centerX, centerY, radius, 3 * PI / 2, (3 * PI / 2) + theta)
    ctx.lineTo(centerX + (radius + width) * cos((PI / 2) - theta),
               centerY - (radius + width) * sin((PI / 2) - theta))
    ctx.arc(centerX, centerY, radius + width, (3 * PI / 2) + theta, 3 * PI / 2, true)
    ctx.closePath()

    ctx.fillStyle = color
    ctx.fill()
}

function drawTime(hours, minutes, seconds) {
    var timeString = ""
    timeString += (hours < 10) ? "0" + hours : hours
    timeString += (minutes < 10) ? ":0" + minutes : ":" + minutes
    timeString += (seconds < 10) ? ":0" + seconds : ":" + seconds
    
    ctx.font = "32px Orbitron, Arial, sans-serif"
    ctx.fillStyle = "#b58900"
    ctx.textAlign = "center"
    ctx.textBaseline = "middle"
    ctx.fillText(timeString, centerX, centerY)
}

function clearScreen() {
    ctx.clearRect(0, 0, canvas.width, canvas.height)  
}

function update() {
    if (seconds == 59) {
        seconds = 0
        if (minutes == 59) {
            minutes = 0
            if (hours == 23) {
                hours = 0
            } else {
                hours = hours + 1
            }
        } else {
            minutes = minutes + 1
        }
    } else {
        seconds = seconds + 1
    }
}

setInterval(draw, 1000)
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://fonts.googleapis.com/css?family=Orbitron:400,400italic,700,700italic")

then add the following html tag to your website or blog, place it in the position you want to display.

<canvas></canvas>

and now check your website,
for a demo that I have modified a little, click the button below.


ok, until here, this useless article 
CSS Clock With Polar Model
4/ 5
Oleh

Comments