Canvas画钟 js

用Canvas模拟了webQQ里头的那个钟。下图左侧是webQQ的原版,右侧是画出来的。效果预览

画的过程中都还比较顺利,只是最里边的那个小圆顶部有一点点小渐变,花了不少功夫 。

用得比较多的是旋转部分的代码,得先存之前的位置,然后再旋转,再恢复到原来的属性继续往下画。

HTML部分:

<!DOCTYPE HTML>
<html>
<head>
<meta chaset="utf-8" />
<title>Canvas Clock</title>
<style>
a
{color:#333;margin:0 10px;font-size:24px;}
.ts
{width:850px;text-align:center; height:100px;position:absolute;left:50%;top:50%;margin-top:-55px;margin-left:-405px;border:1px dotted #778855;background:#F5F5F5;padding:10px;}</style>
</head>
<body>
</body>
</html>


JS部分:

(function(){
/*
Author:Jin.dh
Date:2012/3/5
*/
function isIE(){
var userAgent = navigator.userAgent;
var isOpera = userAgent.indexOf("Opera") > -1;
var IE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera ;
return IE;
};

var box = {
w:150,
h:150,
b:"#ccc"
};

var clockAttr ={
x:75,
r:75,
y:75
};

//创建容器
function $C(tag,father){
var o = document.createElement(tag||"div");
father = father || document.body;
father.appendChild(o);
return o;
};

//计时器
var autoId = null;
//初始化
function init(){
if(isIE()){
var tsHTML = "<div class='ts'><h1 style='color:#f00'>您的浏览器暂不支持本Demo,请换成下面的浏览器试试:</h1>";
tsHTML+=" <a href='http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html' target='_blank'>chrome</a><a href='http://www.firefox.com.cn/download/' target='blank'>firefox</a><a href='http://www.opera.com/' target='_blank'>opera</a><a href='http://www.apple.com.cn/safari/' target='_blank'>safari</a></div>";
document.body.innerHTML = tsHTML;
return false;

};
canvas = $C("canvas");
canvas.width = box.w;
canvas.height = box.h;
ctx = canvas.getContext("2d");
go();//开始
};

function go(){
autoId = setTimeout(function(){
drew();
go();
},1000);
}

//画钟
function drew(){
ctx.clearRect(0,0,box.w,box.h)
var now = new Date();
var h = now.getHours();
var m = now.getMinutes();
var s = now.getSeconds();
var rGrd =ctx.createRadialGradient(clockAttr.r, clockAttr.r, clockAttr.r-20, clockAttr.r, clockAttr.r, clockAttr.r); //创建线形渐变
rGrd.addColorStop(1, '#343537'); //最外边的颜色
rGrd.addColorStop(0.2,'#424242'); //靠近内层颜色
rGrd.addColorStop(0, '#fff'); //内圆
ctx.beginPath();
ctx.arc(clockAttr.x,clockAttr.y,clockAttr.r,0,Math.PI*2,true);
ctx.fillStyle = rGrd;
ctx.fill();
ctx.closePath();

ctx.save();//存Canvas原坐标
ctx.translate(clockAttr.r,clockAttr.r);//移动坐标

ctx.strokeStyle = "#ccc";
for(var i =0;i<12;i++){
ctx.beginPath();
ctx.moveTo(0,-clockAttr.r+20); //始点
ctx.lineTo(0,-clockAttr.r+26); //终点
ctx.lineWidth = 1; //线宽
if(i%3===0){ //如果是3/6/9/12则加粗线条,颜色加深
ctx.strokeStyle = "#333";
ctx.lineWidth = 2;
};
ctx.stroke();
ctx.closePath();
ctx.rotate(360/12*Math.PI/180); //旋转画布
};
ctx.restore();

//时针
ctx.save();//存Canvas原坐标
ctx.translate(clockAttr.r,clockAttr.r);//移动坐标
ctx.lineWidth = 8;
//Math.PI/180为弧度算法.请参考数学“弧度”算法。
ctx.rotate((h*60+m)*(360/(12*60))*Math.PI/180); //弧度=当前分 * 每分多少度
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,-30);
ctx.stroke();
ctx.closePath();
ctx.restore();

//分针
ctx.save();//存Canvas原坐标
ctx.translate(clockAttr.r,clockAttr.r);//移动坐标
ctx.rotate((m*60+s)*(360/(60*60))*Math.PI/180); //弧度=当前秒 * 每秒多少度
ctx.fillStyle = "#000";
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,-42);
ctx.lineWidth = 5;
ctx.stroke();
ctx.closePath();
ctx.restore();

//秒针
ctx.save();//存Canvas原坐标
ctx.translate(clockAttr.r,clockAttr.r);//移动坐标
ctx.lineWidth = 3;
ctx.rotate(s*(360/60)*Math.PI/180);//弧度=当前秒 * 每秒多少度
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,-45);
ctx.stroke();
ctx.closePath();
ctx.restore();

//中心圆点
ctx.beginPath();
ctx.arc(clockAttr.x,clockAttr.y,10,0,2*Math.PI,true);
ctx.fillStyle = "#424242";
ctx.fill();
ctx.closePath();

ctx.beginPath();
var linear = ctx.createLinearGradient(clockAttr.x-10,clockAttr.y-10,clockAttr.x-10,clockAttr.y-8);
linear.addColorStop(0,"#ffffff");
linear.addColorStop(1,"#424242");
ctx.arc(clockAttr.x,clockAttr.y,10,0,2*Math.PI,true);
ctx.fillStyle = linear;
ctx.fill();
ctx.closePath();
};

//window onlaod
function addLoad(fn){
var old = window.onload;
if(typeof old == "function"){
window.onload = function(){
fn();
old();
}
}else{
window.onload = fn;
}
};

addLoad(init);//初始化
})();




posted on 2012-03-05 15:50  向我开炮  阅读(318)  评论(0编辑  收藏  举报