html5画图画出时钟,html5 canvas 画时钟

HTML>

// get the canvas

var myCanvas = document.getElementById("myCanvas");

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

function showClock(){

ctx.save();

ctx.save();

ctx.save();

ctx.save();

ctx.save();

ctx.save();

ctx.save();

ctx.clearRect(0,0,400,400);

// create the clock border

ctx.restore();

ctx.beginPath();

ctx.strokeStyle="pink";

ctx.lineWidth=10;

ctx.arc(200,200,150,0,Math.PI*2,true);

ctx.stroke();

// create the hour icon

ctx.restore();

ctx.lineWidth=8;

ctx.strokeStyle="blue";

ctx.translate(200,200);

for(var i=0;i<12;i++){

ctx.beginPath();

ctx.moveTo(135,0);

ctx.lineTo(150,0);

ctx.rotate(Math.PI/6);

ctx.stroke();

}

// create the minute icon

ctx.restore();

ctx.lineWidth=4;

ctx.strokeStyle="blue";

ctx.translate(200,200);

for(var i=0;i<60;i++){

ctx.beginPath();

ctx.moveTo(145,0);

ctx.lineTo(150,0);

ctx.rotate(Math.PI/30);

ctx.stroke();

}

var date = new Date();

var hour = date.getHours();

var minute = date.getMinutes();

var second = date.getSeconds();

hour = hour>=12?hour-12:hour;

// create the hour hand

ctx.restore();

ctx.lineWidth = 14;

ctx.strokeStyle="pink";

ctx.translate(200,200);

ctx.rotate(hour*(Math.PI/6) + (Math.PI/360)*minute + (Math.PI/21600)*second-Math.PI/2);

ctx.beginPath();

ctx.moveTo(-20,0);

ctx.lineTo(90,0);

ctx.stroke();

// create the minute hand

ctx.restore();

ctx.lineWidth = 10;

ctx.strokeStyle="pink";

ctx.translate(200,200);

ctx.rotate((Math.PI/30)*minute + (Math.PI/1800)*second-Math.PI/2);

ctx.beginPath();

ctx.moveTo(-30,0);

ctx.lineTo(125,0);

ctx.stroke();

// create the second hand

ctx.restore();

ctx.lineWidth = 4;

ctx.strokeStyle="pink";

ctx.translate(200,200);

ctx.rotate( (Math.PI/30)*second-Math.PI/2);

ctx.beginPath();

ctx.moveTo(-35,0);

ctx.lineTo(135,0);

ctx.stroke();

ctx.restore();

setTimeout(showClock,1000);

}

showClock();