html>
时钟此浏览器不支持canvas,无法看到时钟。
function drawMark(ctx){
//画时标记
for(var i=1;i<=12;i++){
ctx.save();//保存当前环境的状态。
ctx.translate(250,250);
ctx.strokeStyle = "#DB6E15";
ctx.lineWidth = 7;
ctx.rotate(i*30*Math.PI/180);//Math.PI=180弧度
ctx.beginPath();
ctx.moveTo(0,-170);
ctx.lineTo(0,-190);
ctx.stroke();//绘制已定义的路径。
ctx.closePath();//创建从当前点回到起始点的路径。
ctx.restore();
}
//画分标记
for(var i=0;i<60;i++){
ctx.save();//保存当前环境的状态。
ctx.translate(250,250);
ctx.strokeStyle = "#DB6E15";
ctx.lineWidth = 3;
ctx.rotate(i*6*Math.PI/180);//Math.PI=180弧度
ctx.beginPath();
ctx.moveTo(0,-180);
ctx.lineTo(0,-190);
ctx.stroke();//绘制已定义的路径。
ctx.closePath();//创建从当前点回到起始点的路径。
ctx.restore();
}
//画数字
var clockNumn=[3,6,9,12];
for(var i=0;i<=clockNumn.length;i++){
ctx.save();//保存当前环境的状态。
ctx.translate(250,250);
ctx.beginPath();
ctx.font="16px Arial";
if((clockNumn[i]==3)||(clockNumn[i]==9)){
ctx.fillText(clockNumn[i],155*Math.sin(clockNumn[i]*30*Math.PI/180),6);
}else if((clockNumn[i]==6)||(clockNumn[i]==12)){
ctx.fillText(clockNumn[i],-6,-155*Math.cos(clockNumn[i]*30*Math.PI/180));
}
ctx.stroke();//绘制已定义的路径。
ctx.closePath();//创建从当前点回到起始点的路径。
ctx.restore();
}
}
function drawPin(ctx,hour,minute,second){
//画时针
ctx.save();//保存当前环境的状态。
ctx.translate(250,250);
ctx.strokeStyle = "#DB6E15";
ctx.lineWidth = 7;
ctx.rotate(hour*30*Math.PI/180);//Math.PI=180弧度
ctx.beginPath();
ctx.moveTo(0,-90);
ctx.lineTo(0,10);
ctx.stroke();//绘制已定义的路径。
ctx.closePath();//创建从当前点回到起始点的路径。
ctx.restore();
//画分针
ctx.save();//保存当前环境的状态。
ctx.translate(250,250);
ctx.strokeStyle = "#DB6E15";
ctx.lineWidth = 5;
ctx.rotate(minute*6*Math.PI/180);//Math.PI=180弧度
ctx.beginPath();
ctx.moveTo(0,-120);
ctx.lineTo(0,10);
ctx.stroke();//绘制已定义的路径。
ctx.closePath();//创建从当前点回到起始点的路径。
ctx.restore();
//画秒针
ctx.save();//保存当前环境的状态。
ctx.translate(250,250);
ctx.strokeStyle = "#DB6E15";
ctx.lineWidth = 2;
ctx.rotate(second*6*Math.PI/180);//Math.PI=180弧度
ctx.beginPath();
ctx.moveTo(0,-160);
ctx.lineTo(0,15);
ctx.stroke();//绘制已定义的路径。
ctx.closePath();//创建从当前点回到起始点的路径。
ctx.restore();
}
function drawClock(){
//获取绘图对象
var clock = document.getElementById("clock");
//建立HTML5对象
var ctx = clock.getContext("2d");
//获取时间信息
var time = new Date();
var hour = time.getHours();
var minute = time.getMinutes();
var second = time.getSeconds();
//获取时间在12显示内的范围,绘制小时指针
hour = hour + minute/60;
hour?hour>12:hour-12;//hour = hour%12;
//清除canvans内像素
ctx.clearRect(0,0,500,500);
ctx.beginPath();//设置路径
ctx.strokeStyle = "#8AC007";//设置笔触的颜色
ctx.lineWidth = 10;//设置笔触的尺寸
ctx.arc(250,250,200,0,2*Math.PI);//绘制图形
ctx.stroke();//绘制已定义的路径。
ctx.closePath();//创建从当前点回到起始点的路径。
drawMark(ctx);
drawPin(ctx,hour,minute,second);
}
drawClock();
setInterval(drawClock,1000);