完全使用 javascript 编写的带有指针的时钟

[Hello World!]

这是一个使用 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，这是我刚刚申请的一个免费网站。

[lerosua]

看看先~

[archangelwin]

不错。顶起了。