HTML5 Canvas日期圆形时钟代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5 Canvas日期圆形时钟代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Canvas日期圆形时钟代码</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/shizhong.js"></script>

<style type="text/css">
#myCanvas {
	opacity: 0.8;
	-webkit-animation: roll 3s;
	animation: roll 3s;
}
@-webkit-keyframes roll {
	from{-webkit-transform:rotate(360deg);opacity:0;}
	to{-webkit-transform:rotate(0deg);opacity:0.8;}		
}
@keyframes roll {
	from{transform:rotate(360deg);opacity:0;}
	to{transform:rotate(0deg);opacity:0.8;}		
}
</style>

</head>
<body>

<br /><br />

<div style="width:150px;margin:0 auto;">
	<canvas id="myCanvas" width="150" height="150"></canvas>
</div>

<!--  时钟悬浮网页游动
<script> 
var x = 50,y = 60;//图片距离顶部的位置 
var xin = true, yin = true 
var step = 1  //图片移动的步速 越高越快
var delay = 10 //图片移动延时 越高越慢
var obj=document.getElementById("myCanvas") 
function float() { 
var L=T=0
var R= document.documentElement.clientWidth-obj.offsetWidth //offsetHeight 则是网页内容实际高度
var B = document.documentElement.clientHeight-obj.offsetHeight // clientHeight 就是透过浏览器看内容的这个区域高度。
obj.style.left = x + document.documentElement.scrollLeft + "px";
obj.style.top = y + document.documentElement.scrollTop + "px";
x = x + step*(xin?1:-1) 
if (x < L) { xin = true; x = L} 
if (x > R){ xin = false; x = R} 
y = y + step*(yin?1:-1) 
if (y < T) { yin = true; y = T } 
if (y > B) { yin = false; y = B } 
} 
var itl= setInterval("float()", delay) 
obj.onmouseover=function(){clearInterval(itl)} 
obj.onmouseout=function(){itl=setInterval("float()", delay)} 
</script>
-->
</body>
</html>

JS代码(shizhong.js):

$(function(){
	var iNow = 0;
	var arr = ["#ffae00","black"];
	myClock();
	myday();
	setInterval(myClock,1000);
	//每一秒钟重绘一次setInterval(myday,1000);
	function myday(){
	var a = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
	var week = new Date().getDay();
	var dateDom=new Date();
	var year=dateDom.getFullYear();
	var month=dateDom.getMonth()+1;
	var day=dateDom.getDate();
	var mm=year+"-"+month+"-"+day;
	var myCanvas = document.getElementById("myCanvas");
	var cxt=myCanvas.getContext("2d");
	cxt.font="14px 黑体";
	//绘制实心字cxt.fillStyle="red";
	//填充红色cxt.fillText(mm,50,105);
	for(var ind=0;
	ind<6;
	ind++){
	if(week==ind){
	var myCanvas = document.getElementById("myCanvas");
	var cxt=myCanvas.getContext("2d");
	cxt.font="14px 黑体";
	//绘制实心字cxt.strokeStyle="red";
	//填充红色cxt.strokeText(a[ind],55,55);
}
}
}
function myClock(){
	//得到年月日var myCanvas = document.getElementById("myCanvas");
	var oC = myCanvas.getContext("2d");
	//得到时分秒var now = new Date(),sec = now.getSeconds(),min = now.getMinutes(),hour = now.getHours();
	hour = hour>=12 ? hour-12:hour;
	iNow++;
	iNow = iNow%2;
	oC.save();
	//save():保存当前环境的状态//初始化画布oC.clearRect(0,0,myCanvas.width,myCanvas.height);
	//clearRect:在给定的矩形内清除指定的像素oC.translate(75,75);
	//translate:重新映射画布上的 (0,0) 位置oC.scale(0.5,0.5);
	//scale:缩放当前绘图至更大或更小oC.rotate(-Math.PI/2);
	//rotate:旋转当前绘图 // Math.PI:PI 属性就是 π，即圆的周长和它的直径之比//白色背景oC.save();
	oC.fillStyle = "#ccc";
	oC.beginPath();
	//beginPath:起始一条路径，或重置当前路径oC.arc(0,0,14+0,0,Math.PI*2,true);
	//arc:创建弧/曲线（用于创建圆形或部分圆）oC.fill();
	//fill:填充当前绘图（路径）oC.restore();
	//restore:返回之前保存过的路径状态和属性oC.strokeStyle = "#548B54";
	//strokeStyle:设置或返回用于笔触的颜色、渐变或模式oC.fillStyle = "black";
	//fillStyle:设置或返回用于填充绘画的颜色、渐变或模式oC.lineWidth = 4;
	//设置或返回当前的线条宽度oC.lineCap = "round";
	//设置或返回线条的结束端点样式//时针刻度oC.save();
	oC.beginPath();
	for(var i=0;
	i<12;
	i++){
	oC.moveTo(110,0);
	//把路径移动到画布中的指定点，不创建线条oC.lineTo(120,0);
	//添加一个新点，然后在画布中创建从该点到最后指定点的线条oC.rotate(Math.PI/6);
	//旋转当前绘图}
oC.stroke();
	//绘制已定义的路径oC.restore();
	//分针刻度oC.save();
	oC.fillStyle = "black";
	oC.lineWidth = 2;
	oC.beginPath();
	for(var i=0;
	i<60;
	i++){
	if(i%5 != 0){
	oC.moveTo(116,0);
	oC.lineTo(120,0);
}
oC.rotate(Math.PI/30);
}
oC.stroke();
	oC.restore();
	oC.save();
	oC.rotate(Math.PI/2);
	oC.font = "30px impact";
	//12点oC.fillText("12",-15,-80);
	oC.fillText("1",40,-75);
	//文本的 x 坐标位置,文本的 y 坐标位置oC.fillText("2",80,-35);
	//3点oC.fillText("3",88,13);
	//6点oC.fillText("6",-8,104);
	//9点oC.fillText("9",-103,11);
	oC.restore();
	//画时针oC.save();
	oC.strokeStyle = "#ff3300";
	oC.rotate((Math.PI/6)*hour+(Math.PI/360)*min+(Math.PI/21600)*sec);
	oC.lineWidth = 8;
	oC.beginPath();
	oC.moveTo(-20,0);
	oC.lineTo(60,0);
	oC.stroke();
	oC.restore();
	//画分针oC.save();
	oC.rotate((Math.PI/30)*min+(Math.PI/1800)*sec);
	oC.strokeStyle = "#27A9E3";
	oC.lineWidth = 6;
	oC.beginPath();
	oC.moveTo(-28,0);
	oC.lineTo(90,0);
	oC.stroke();
	oC.restore();
	//画秒针/*oC.save();
	oC.rotate(sec*Math.PI/30);
	oC.strokeStyle = "#D40000";
	oC.lineWidth = 3;
	oC.beginPath();
	oC.moveTo(-30,0);
	oC.lineTo(105,0);
	oC.stroke();
	oC.restore();
	*/
//风车秒针oC.save();
	oC.rotate(sec*Math.PI/30);
	oC.save();
	oC.fillStyle = "#f23";
	oC.beginPath();
	oC.arc(94,0,10,0,Math.PI,true);
	oC.fill();
	oC.restore();
	oC.save();
	oC.rotate(Math.PI/2);
	oC.fillStyle = "#ffae00";
	oC.beginPath();
	oC.arc(10,-84,10,0,Math.PI,true);
	oC.fill();
	oC.restore();
	oC.save();
	oC.fillStyle = "#27A9E3";
	oC.beginPath();
	oC.arc(74,0,10,Math.PI,Math.PI*2,true);
	oC.fill();
	oC.restore();
	oC.save();
	oC.rotate(Math.PI/2);
	oC.fillStyle = "#0eaf52";
	oC.beginPath();
	oC.arc(-10,-84,10,Math.PI,Math.PI*2,true);
	oC.fill();
	oC.restore();
	oC.restore()//风车秒针//表框oC.save();
	oC.lineCap = "butt";
	oC.lineWidth = 16;
	oC.save();
	oC.strokeStyle = "#BBFFFF";
	oC.beginPath();
	oC.arc(0,0,142,0,Math.PI*2,true);
	oC.stroke();
	oC.restore();
	oC.save();
	oC.strokeStyle = "#C0FF3E";
	oC.beginPath();
	oC.arc(0,0,142,0,Math.PI/iNow*5/3,true);
	oC.stroke();
	oC.restore();
	oC.restore();
	//中心点oC.save();
	oC.fillStyle = "#fff";
	oC.beginPath();
	oC.arc(0,0,4,0,Math.PI*2,true);
	oC.fill();
	oC.restore();
	oC.restore();
}
;
}
);

附件:下载该文件资源,减少时间成本(增值服务)