当前时区为 UTC + 8 小时



发表新帖 回复这个主题  [ 3 篇帖子 ] 
作者 内容
1 楼 
 文章标题 : 完全使用 javascript 编写的带有指针的时钟
帖子发表于 : 2009-01-31 18:01 
头像

注册: 2008-06-23 15:19
帖子: 3030
地址: 北欧某国
系统: ���������
送出感谢: 21
接收感谢: 6
这是一个使用 javascript 和 canvas 编写的时钟。这个时钟的核心部分是使用 canvas 来绘制表盘上的指针,那么什么是呢?引用 Mozilla 网站上的一段话:
引用:
<canvas>是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。右面的图象展示了一些<canvas>的应用示例,我们将会在此教程中看到他们的实现。

<canvas>最先在苹果公司(Apple)的Mac OS X Dashboard上被引入,而后被应用于Safari。基于Gecko1.8的浏览器,例如Firefox 1.5,也支持这个新元素。元素<canvas>是WhatWG Web applications 1.0也就是大家都知道的HTML 5标准规范的一部分。


下面请大家来看看这个程序的代码:
代码:
function Clockdraw()
{
    var canvas = document.getElementById("clock");
    if (canvas.getContext)
    {
        var time = new Date ()
        sec=Math.PI*time.getSeconds()/30
        min=Math.PI*time.getMinutes()/30
        hr =Math.PI*((time.getHours()*60)+time.getMinutes())/360
           var ctx = canvas.getContext('2d');
        ctx.clearRect(0,0,244,241);//将一块区域清空
        //绘制时针
        ctx.fillStyle = "rgb(192,192,192)"; //设置填充色
        ctx.beginPath();//开始绘制路径
        ctx.moveTo(Math.sin(hr-1.5)*2+122 , -Math.cos(hr-1.5)*2+120);//将画笔移动到第一个点上
        ctx.lineTo(Math.sin(hr-0.05)*50+122 , -Math.cos(hr-0.05)*50+120);//移动到指针末端的一个点上
        ctx.lineTo(Math.sin(hr+0.05)*50+122 , -Math.cos(hr+0.05)*50+120);//移动到指针末端的一个点上
        ctx.lineTo(Math.sin(hr+1.5)*2+122 , -Math.cos(hr+1.5)*2+120);//将画笔移动到最后一个点上
        ctx.closePath();//封闭路径,这条语句可有可无
        ctx.fill();//填充
        //绘制分针
        ctx.beginPath();
        ctx.moveTo(Math.sin(min-1.5)*2+122 , -Math.cos(min-1.5)*2+120);//将画笔移动到第一个点上
        ctx.lineTo(Math.sin(min-0.04)*70+122 , -Math.cos(min-0.04)*70+120);//移动到指针末端的一个点上
        ctx.lineTo(Math.sin(min+0.04)*70+122 , -Math.cos(min+0.04)*70+120);//移动到指针末端的一个点上
        ctx.lineTo(Math.sin(min+1.5)*2+122 , -Math.cos(min+1.5)*2+120);//将画笔移动到最后一个点上
        ctx.fill();
        //绘制秒针
        ctx.fillStyle = "rgb(128,255,0)"; //设置填充色
        ctx.beginPath();
        ctx.moveTo(Math.sin(sec-1.5)*1+122 , -Math.cos(sec-1.5)*1+120);//将画笔移动到第一个点上
        ctx.lineTo(Math.sin(sec-0.01)*90+122 , -Math.cos(sec-0.01)*90+120);//移动到指针末端的一个点上
        ctx.lineTo(Math.sin(sec+0.01)*90+122 , -Math.cos(sec+0.01)*90+120);//移动到指针末端的一个点上
        ctx.lineTo(Math.sin(sec+1.5)*1+122 , -Math.cos(sec+1.5)*1+120);//将画笔移动到最后一个点上
        ctx.fill();
    }
}
document.write("<canvas id='clock' width='244' height='241' style='background-image:url(\"http://library2.usask.ca/~fichter/images/blog/firefoxlogo.png\");position:fixed;top:10px;right:10px;'>");
setInterval('Clockdraw()',1000);


经测试,这个小程序可以在 Firefox、Opera 和 Konqueror中运行,其他浏览器还没有测试过。希望大家能够喜欢这个小程序。

如果想看这个程序的效果,请访问 liuwanfang86.jimdo.com 或liuwanfang.lingd.net,这是我刚刚申请的一个免费网站。


页首
 用户资料  
 
2 楼 
 文章标题 : Re: 完全使用 javascript 编写的带有指针的时钟
帖子发表于 : 2009-01-31 21:16 
头像

注册: 2007-11-29 9:41
帖子: 8455
送出感谢: 0 次
接收感谢: 0 次
看看先~ :em06


页首
 用户资料  
 
3 楼 
 文章标题 : Re: 完全使用 javascript 编写的带有指针的时钟
帖子发表于 : 2009-05-10 20:00 

注册: 2007-09-09 14:34
帖子: 74
送出感谢: 0 次
接收感谢: 0 次
:em11 不错。顶起了。


页首
 用户资料  
 
显示帖子 :  排序  
发表新帖 回复这个主题  [ 3 篇帖子 ] 

当前时区为 UTC + 8 小时


在线用户

正在浏览此版面的用户:没有注册用户 和 1 位游客


不能 在这个版面发表主题
不能 在这个版面回复主题
不能 在这个版面编辑帖子
不能 在这个版面删除帖子
不能 在这个版面提交附件

前往 :  
本站点为公益性站点,用于推广开源自由软件,由 DiaHosting VPSBudgetVM VPS 提供服务。
我们认为:软件应可免费取得,软件工具在各种语言环境下皆可使用,且不会有任何功能上的差异;
人们应有定制和修改软件的自由,且方式不受限制,只要他们自认为合适。

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
简体中文语系由 王笑宇 翻译