Html5 canvas画布制作时间钟表

Html

Css

   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

立即下载

Html5 canvas画布制作时间钟表



代码描述：Html5 新标签canvas画布制作时间钟表

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

houlai

相关代码

Html5 canvas画布制作时间钟表

最新