html5 can,html5canvans时钟

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);