Hello Linux

function Clockdraw(halfwidth)
{
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(30,30,halfwidth+halfwidth-60,halfwidth+halfwidth-60);//将一块区域清空
ctx.fillStyle = “rgb(250,250,250)”;
ctx.beginPath();
ctx.arc(0,0,halfwidth-30,0,Math.PI+Math.PI,true);
ctx.fill();

//绘制标志
ctx.fillStyle = “rgb(180,180,180)”;
ctx.save();//存储目前状态
for(var i=0;i<12;i++)
{
ctx.rotate(Math.PI/6);//旋转30度
ctx.beginPath();
ctx.moveTo(-1,halfwidth-35);
ctx.lineTo(+1,halfwidth-35);
ctx.lineTo(+1,halfwidth-53);
ctx.lineTo(-1,halfwidth-53);
ctx.fill();
}
ctx.restore();//返回到先前的状态

ctx.fillStyle = “rgb(52,52,52)”; //设置填充色
ctx.save();//存储目前状态
ctx.rotate(hr);//旋转一定的度
//绘制时针
ctx.beginPath();//开始绘制路径
ctx.moveTo(-1 , -(halfwidth-35)*0.6);//将画笔移动到第一个点上
ctx.lineTo(1 , -(halfwidth-35)*0.6);//移动到指针末端的一个点上
ctx.lineTo(5 , 0);//移动到指针末端的一个点上
ctx.lineTo(-5 , 0);//将画笔移动到最后一个点上
ctx.closePath();//封闭路径，这条语句可有可无
ctx.fill();//填充
ctx.restore();//返回到先前的状态
ctx.save();//存储目前状态
ctx.rotate(min);//旋转一定的度
//绘制分针
ctx.beginPath();
ctx.moveTo(-1 , -(halfwidth-35)*0.8);//将画笔移动到第一个点上
ctx.lineTo(1 , -(halfwidth-35)*0.8);//移动到指针末端的一个点上
ctx.lineTo(3 , 0);//移动到指针末端的一个点上
ctx.lineTo(-3 , 0);//将画笔移动到最后一个点上
ctx.fill();
ctx.restore();//返回到先前的状态
ctx.beginPath();
ctx.arc(0,0,9,0,Math.PI+Math.PI,true);
ctx.fill();
ctx.save();//存储目前状态
ctx.rotate(sec);//旋转一定的度
//绘制秒针
ctx.fillStyle = “rgb(228,0,0)”; //设置填充色
ctx.beginPath();
ctx.moveTo(-0.5 , -(halfwidth-35));//将画笔移动到第一个点上
ctx.lineTo(0.5 , -(halfwidth-35));//移动到指针末端的一个点上
ctx.lineTo(1 , (halfwidth-35)*0.2);//移动到指针末端的一个点上
ctx.lineTo(-1 , (halfwidth-35)*0.2);//将画笔移动到最后一个点上
ctx.fill();
ctx.beginPath();
ctx.arc(0,0,4,0,Math.PI+Math.PI,true);
ctx.fill();
ctx.restore();//返回到先前的状态
}
}
//生成一个canvas组件，把他插入body。
function createClock(width)
{
var canvas = document.createElement(’canvas’);
canvas.id = ‘clock’;
canvas.width = width;
canvas.height = width;
canvas.style.position = ‘fixed’;
canvas.style.top = ‘10px’;
canvas.style.right = ‘10px’;
document.body.appendChild(canvas);
if (canvas.getContext)
{
var ctx = canvas.getContext(’2d’);

//绘制表盘
ctx.fillStyle = “rgba(0,0,0,0.5)”;
ctx.beginPath();
ctx.moveTo(width-34,0);
ctx.quadraticCurveTo(width,0,width,34);
ctx.lineTo(width,width-34);
ctx.quadraticCurveTo(width,width,width-34,width);
ctx.lineTo(34,width);
ctx.quadraticCurveTo(0,width,0,width-34);
ctx.lineTo(0,34);
ctx.quadraticCurveTo(0,0,34,0);
ctx.lineTo(width-34,0);
ctx.lineTo(width-35,5);
ctx.lineTo(35,5);
ctx.quadraticCurveTo(5,5,5,35);
ctx.lineTo(5,width-35);
ctx.quadraticCurveTo(5,width-5,35,width-5);
ctx.lineTo(width-35,width-5);
ctx.quadraticCurveTo(width-5,width-5,width-5,width-35);
ctx.lineTo(width-5,35);
ctx.quadraticCurveTo(width-5,5,width-35,5);
ctx.fill();

ctx.fillStyle = “rgba(235,235,235,0.5)”;
ctx.beginPath();
ctx.moveTo(width-35,5);
ctx.quadraticCurveTo(width-5,5,width-5,35);
ctx.lineTo(width-5,width*2/5);
ctx.quadraticCurveTo(width/2,width/6,5,width*2/5);
ctx.lineTo(5,35);
ctx.quadraticCurveTo(5,5,35,5);
ctx.fill();

ctx.fillStyle = “rgba(180,180,180,0.5)”;
ctx.beginPath();
ctx.moveTo(width-5,width-35);
ctx.quadraticCurveTo(width-5,width-5,width-35,width-5);
ctx.lineTo(35,width-5);
ctx.quadraticCurveTo(5,width-5,5,width-35);
ctx.lineTo(5,width*2/5);
ctx.quadraticCurveTo(width/2,width/6,width-5,width*2/5);
ctx.fill();

ctx.fillStyle = “rgba(0,0,0,0.5)”;
ctx.beginPath();
ctx.arc(width/2,width/2,width/2-25,0,Math.PI+Math.PI,true);
ctx.fill();
ctx.translate(width/2,width/2);//移动中心
}
setInterval(’Clockdraw(’+width/2+’)',1000);
}
//在1.2秒后生成一个canvas组件，您也可在您喜欢的时间生成组件。246代表时钟的宽度。
setTimeout(”createClock(206)”,500);

这是我制作的一个网页时中，这个时钟的表盘和表针都是用javascript绘制的矢量图形，它可以在大多数的非IE浏览器中执行。