html网页作品欣赏关于时光,Html5 canvas画布制作时间钟表

HtmlCssJs

body {

background:#ccc;

}

* {

margin:0;

padding:0;

}

#cvs {

background:#fff;

border:1px solid darkblue;

}

function aa() {

var oCvs=document.getElementById('cvs');

// 创建画布2d环境

var Cvs=oCvs.getContext('2d');

function clock(){

// 获取实时的时间的时分秒

var nData=new Date();

var iS=nData.getSeconds();

var iM=nData.getMinutes()+iS/60;

var iH=nData.getHours()+iM/60;

var iHV=(iH*30-90)*Math.PI/180;

var iMV=(iM*6-90)*Math.PI/180;

var iSV=(iS*6-90)*Math.PI/180

for (var i=0;i<60;i++){

Cvs.save();

// 路径开始

Cvs.beginPath();

// 起始点

Cvs.moveTo(200,200);

// 画圆

Cvs.arc(200,200,150,i*6*Math.PI/180,(i+1)*6*Math.PI/180);

// 描边

Cvs.stroke();

Cvs.restore();

}

Cvs.save();

Cvs.beginPath();

Cvs.fillStyle='#fff';

Cvs.arc(200,200,145,0*Math.PI/180,360*Math.PI/180);

Cvs.fill();

Cvs.restore();

for (var i=0;i<12;i++){

Cvs.save();

Cvs.beginPath();

Cvs.lineWidth='2';

Cvs.moveTo(200,200);

Cvs.arc(200,200,150,i*30*Math.PI/180,(i+1)*30*Math.PI/180);

Cvs.stroke();

Cvs.restore();

}

Cvs.save();

Cvs.beginPath();

Cvs.fillStyle='#fff';

Cvs.arc(200,200,140,0*Math.PI/180,360*Math.PI/180);

Cvs.fill();

Cvs.restore();

Cvs.save();

Cvs.beginPath();

Cvs.arc(200,200,5,0*Math.PI/180,360*Math.PI/180);

Cvs.fill();

Cvs.restore();

//H

Cvs.save();

Cvs.beginPath();

Cvs.lineWidth='3';

Cvs.moveTo(200,200);

Cvs.arc(200,200,50,iHV,iHV);

Cvs.stroke();

Cvs.restore();

//M

Cvs.save();

Cvs.beginPath();

Cvs.lineWidth='2';

Cvs.moveTo(200,200);

Cvs.arc(200,200,70,iMV,iMV);

Cvs.stroke();

Cvs.restore();

//S

Cvs.save();

Cvs.beginPath();

Cvs.strokeStyle='red';

Cvs.lineWidth='1';

Cvs.moveTo(200,200);

Cvs.arc(200,200,80,iSV,iSV);

Cvs.stroke();

Cvs.restore();

}

clock()

setInterval(function(){

clock()

},1000);

}aa();

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3