柠檬铺

前面的准备工作都完成了，现在我们来综合下，完成一个具有时分秒的会动的钟

[javascript] view plaincopy

$(

　　function() {

　　clock();

　　setInterval(clock, 1000);

　　}

　　);

　　function clock() {

　　var canvas = document.getElementById("mycanvas");

　　canvas.height = 500;

　　canvas.width = 500;

　　var context = canvas.getContext("2d");

　　context.beginPath();

　　context.lineWidth = 1;

　　context.strokeStyle = "rgb(211,211,211)";

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

　　$.log(i);

　　context.moveTo(i * 10, 0);

　　context.lineTo(i * 10, 500);

　　context.stroke();

　　}

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

　　$.log(i);

　　context.moveTo(0, i * 10);

　　context.lineTo(500, i * 10);

　　context.stroke();

　　}

　　context.beginPath();

　　context.strokeStyle = "rgb(255,0,0)";

　　context.arc(250, 250, 200, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

　　context.stroke();

　　context.save(); //存储当前画布坐标系状态

　　context.beginPath();

　　context.font = "14px Tahoma"

　　context.translate(255, 255); //将坐标系坐标原点移至图中间

　　context.strokeStyle = "#FFFFFF";

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

　　context.fillText((i + 3) % 12 == 0 ? 12 : (i + 3) % 12, 180, 0);

　　context.rotate((Math.PI / 6));

　　}

　　context.restore();

　　context.save();

　　context.beginPath();

　　context.lineWidth = 5;

　　context.translate(255, 255); //将坐标系坐标原点移至图中间

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

　　if (i % 5 != 0) {

　　context.beginPath();

　　context.moveTo(180, 0);

　　context.lineTo(190, 0);

　　context.stroke();

　　}

　　context.rotate(Math.PI / 30);

　　}

　　context.restore();

　　var now = new Date();

　　var sec = now.getSeconds();

　　var min = now.getMinutes();

　　var hr = now.getHours() >= 12 ? now.getHours() - 12 : now.getHours();

　　context.save();

　　context.translate(255, 255); //将坐标系坐标原点移至图中间

　　// - (Math.PI / 6) * 3 是因为0度在3点这里

　　context.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) *sec - (Math.PI / 6) * 3);

　　context.lineWidth = 14;

　　context.beginPath();

　　context.moveTo(-20, 0);

　　context.lineTo(150, 0);

　　context.stroke();

　　context.restore();

　　context.save();

　　context.translate(255, 255); //将坐标系坐标原点移至图中间

　　context.rotate(min * (Math.PI / 30) + (Math.PI / 1800) * sec - (Math.PI / 6) * 3)

　　context.lineWidth = 10;

　　context.beginPath();

　　context.moveTo(-28, 0);

　　context.lineTo(160, 0);

　　context.stroke();

　　context.restore();

　　context.save();

　　context.translate(255, 255); //将坐标系坐标原点移至图中间

　　context.lineWidth = 1;

　　context.rotate(sec * (Math.PI / 30) + (Math.PI / 1800) * sec - (Math.PI / 6) * 3)

　　context.lineWidth = 10;

　　context.beginPath();

　　context.moveTo(-28, 0);

　　context.lineTo(160, 0);

　　context.stroke();

　　context.restore();

　　}