Add Beautiful canvas clock on your site..

बहुत ही कम वेबसाइटो पर Canvas clock देखने को मिलते हैं । अपने वेबसाइट पर भी canvas Clock add करें ।

इस code को copy कर अपने website पर paste करें ।

<!DOCTYPE html>

<canvas id=”canvas” width=”400″ height=”400″

var canvas = document.getElementById(“canvas”);
var ctx = canvas.getContext(“2d”);
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(drawClock, 1000);
function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);

function drawFace(ctx, radius) {
var grad;
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = ‘white’;
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.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.fillStyle = ‘#333’;

function drawNumbers(ctx, radius) {
var ang;
var num;
ctx.font = radius*0.15 + “px arial”;
for(num = 1; num



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.