|
锁定老帖子 主题：HTML5实现的时钟
精华帖 (1) :: 良好帖 (1) :: 新手帖 (1) :: 隐藏帖 (4)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2012-03-09
这是一个用HTML5做的时钟，只是一个小练习，觉得和照片比较像，拿出来分享一下。
这个时钟是自己的第一个html5动画练习，不足之处还望指点... <!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>practice---clock</title>
<style type="text/css">
@font-face {
font-family:DFGirl;
src:url("./DFGirl.ttf");
src: local("DFGirl"), url("./DFGirl.ttf");
}
canvas{
border:2px solid #;
margin:px px;
}
</style>
<!--[if lt IE 9]>
<script src="excanvas.min.js" type="text/javascript"></script>
<![endif] -->
</head>
<body>
<canvas id='c'></canvas>
</body>
<script type="text/javascript">
window.onload = draw;
function draw(){
var canvas = document.getElementById('c');
//You can change the width and height
canvas.width = ;
canvas.height = ;
if(!canvas.getContext){
alert('Your browser don\'t support canvas!');
}else{
clock(canvas);
//starts here
}
function clock(canvas){
var ctx = canvas.getContext('2d');
//背景色
ctx.fillStyle = '#E6E4E5';
ctx.fillRect(0, 0, canvas.width, canvas.height);
//更改坐标系到中间
ctx.translate(canvas.width*0.5, canvas.height*0.5);
//画底部阴影
var bottom_shadow = ctx.createRadialGradient(0, , , 0, , );
bottom_shadow.addColorStop(0, 'rgba(0, 0, 0, )');
bottom_shadow.addColorStop(0.4, 'rgba(, , , )');
bottom_shadow.addColorStop(0.9, '#E6E4E5');
ctx.fillStyle = bottom_shadow;
ctx.beginPath();
ctx.arc(0, , , Math.PI*0.8, Math.PI*0.2, false);
ctx.fill();
//底部桌面
var bottom_blank = 18;
ctx.fillStyle = '#DFDFDF';
ctx.fillRect(-canvas.width*0.5, canvas.height*0.5-bottom_blank, canvas.width, bottom_blank);
//白色外框
var frame_width = 18;
var inner_radius = ;
ctx.beginPath();
ctx.strokeStyle = '#FBFAF6';
ctx.lineWidth = frame_width;
ctx.arc(0, 0, inner_radius + frame_width*0.5, 0, Math.PI*2, true);
ctx.stroke();
//黑色内线
ctx.beginPath();
ctx.strokeStyle = '#';
ctx.lineWidth = 2;
ctx.arc(0, 0, inner_radius + 2, 0, Math.PI*2, true);
ctx.stroke();
//白色内遮罩
ctx.beginPath();
ctx.arc(0, 0, inner_radius, 0, Math.PI*2, true);
ctx.clip();
setInterval(function(){time_animate(ctx);}, 0);
}
//时针函数
function get_hand_angle(h, m, s){
if(h>12)
h -= 12;
var h_angle = (h/6 + m/ + s/00) * Math.PI;
var m_angle = (m/30 + s/0) * Math.PI;
var s_angle = s/30 * Math.PI;
return {
'h' : h_angle,
'm' : m_angle,
's' : s_angle
}
}
function time_animate(ctx){
ctx.save();
ctx.clearRect(-, -, , );
var inner_radius = ;
//图案背景
ctx.beginPath();
var img = new Image();
img.src = 'point.jpg';
var bg = ctx.createPattern(img, 'repeat');
ctx.fillStyle = bg;
ctx.arc(0, 0, inner_radius, 0, Math.PI*2, true);
ctx.fill();
if(window.ActiveXObject){ //IE HACK
for(var i=-; i<; i+=70){
for(var j=-; j<; j+=70)
ctx.drawImage(img, i, j);
}
ctx.beginPath();
ctx.strokeStyle = '#eee';
ctx.lineWidth = ;
ctx.arc(0, 0, , 0, Math.PI*2, true);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = '#';
ctx.lineWidth = 2;
ctx.arc(0, 0, , 0, Math.PI*2, true);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = '#fff';
ctx.lineWidth = 17;
ctx.arc(0, 0, , 0, Math.PI*2, true);
ctx.stroke();
}
//数字
ctx.fillStyle = '#';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
var font_radius = ;
//var font_family = '華康少女文字W6'; //只有opera能用
var font_family = 'DFGirl';
for(var angle=Math.PI/6,i=1; i<13; angle += Math.PI/6, i++){
if(i%3 == 0){
font_radius = ;
ctx.font = '65px ' + font_family;
}else{
ctx.font = 'bold 30px ' + font_family;
font_radius = ;
}
//ctx.fillText(i.toString(), font_radius*Math.sin(angle)-5, -font_radius*Math.cos(angle)-4);//中文少女体微调数字位置
ctx.fillText(i.toString(), font_radius*Math.sin(angle), -font_radius*Math.cos(angle));
}
//内阴影
if(!window.ActiveXObject){ //NOT IE
ctx.translate(10, -10);
var inner_shadow = ctx.createRadialGradient(0, 0, , 0, 0, );
inner_shadow.addColorStop(0.1, 'rgba(0, 0, 0, 0)');
inner_shadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.1)');
inner_shadow.addColorStop(1, 'rgba(0, 0, 0, 0.8)');
ctx.beginPath();
ctx.fillStyle = inner_shadow;
ctx.arc(0, 0, , 0, Math.PI*2, true);
ctx.fill();
}
var now = new Date();
//显示指针
var time = get_hand_angle(now.getHours(), now.getMinutes(), now.getSeconds());
var h_width = , h_height = 7;
var m_width = , m_height = 4;
var s_width = , s_height = 2;
var outside_width = 35;
ctx.shadowOffsetX = 6;
ctx.shadowOffsetY = 3;
ctx.shadowBlur = 4;
ctx.shadowColor = '#aaa';
ctx.fillStyle = '#';
ctx.rotate(time.h);
ctx.fillRect(-h_height*0.5, -h_width+outside_width, h_height, h_width);
ctx.rotate(time.m-time.h);
ctx.fillRect(-m_height*0.5, -m_width+outside_width, m_height, m_width);
ctx.rotate(time.s-time.m);
ctx.fillRect(-s_height*0.5, -s_width+outside_width, s_height, s_width);
ctx.rotate(-time.s);
ctx.shadowColor = 'rgba(0, 0, 0, 0)';
//重画一次时针，解决阴影覆盖本身的指针
ctx.rotate(time.h);
ctx.fillRect(-h_height*0.5, -h_width+outside_width, h_height, h_width);
//中间的固定圈
ctx.beginPath();
ctx.strokeStyle = '#';
ctx.lineWidth = 4;
ctx.arc(0, 0, 6, 0, Math.PI*2, true);
ctx.stroke();
ctx.restore();
}
}
</script>
</html>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2012-03-10
这该怎么运行？
|
| 返回顶楼 | |
|
发表时间：2012-03-10
以后这种半成品不要拿出来显摆，要让人看要么弄个下载，要么直接复制能用。
|
| 返回顶楼 | |
|
发表时间：2012-03-10
小伙子，以后要贴图，懂吗？
|
| 返回顶楼 | |
|
发表时间：2012-03-10
楼主是女的，贴不贴图都无所谓了。
|
| 返回顶楼 | |
|
发表时间：2012-03-10
爪哇岛岛主 写道 楼主是女的，贴不贴图都无所谓了。 为什么是女的就不用贴图了呢？？不懂 |
| 返回顶楼 | |
|
发表时间：2012-03-11
上一下图，哈：
|
| 返回顶楼 | |
|
发表时间：2012-03-11
嗯 样式挺漂亮的 不愧是美女做出来的啊
|
| 返回顶楼 | |
|
发表时间：2012-03-11
你自己贴图有什么用？拷贝你的代码保存浏览器运行啥反应都没有。不管是IE还是FF还Google的。浏览器都是支持html5的
|
| 返回顶楼 | |
|
发表时间：2012-03-12
咳，咳， 我冒味地说一句， 得罪之处请原谅。
以其说是html5实现的时钟， 还不如说是js实现的时钟。 |
| 返回顶楼 | |
