html5 时钟

最新推荐文章于 2024-09-28 14:06:20 发布

不是我的货

最新推荐文章于 2024-09-28 14:06:20 发布

阅读量390

点赞数

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/wym1581/article/details/50611939

版权

html5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<style>
		 canvas{
		  background:#eee;
		 }
		</style>
		<title>时钟</title>
		<meta charset="">
		<link rel="stylesheet" href="">
		<script>
		window.οnlοad=function  () {
		   var canvas=document.getElementById("canvas");
		   var cobj=canvas.getContext("2d");
		   var originx=200;
		   var originy=200;
		   var radius=100;
		   //阴影
		   cobj.shadowColor="#888";
		   cobj.shadowOffsetX=1;
		   cobj.shadowOffsetY=1;
		   cobj.shadowBlur=3;//模糊效果
		   //渐变色
		   var colorObj=cobj.createRadialGradient(originx,originy,1,originx,originy,100);
           colorObj.addColorStop(0,"#efefef"); 
		   colorObj.addColorStop(1,"#cecece"); 
		   cobj.fillStyle=colorObj;
		   cobj.lineWidth=8;
		   cobj.beginPath();
		   cobj.strokeStyle=colorObj;
		   cobj.arc(originx,originy,radius,0,2*Math.PI);
		   cobj.stroke();
		   cobj.fill();
		   //去掉阴影
		   cobj.shadowColor="#888";
		   cobj.shadowOffsetX=0;
		   cobj.shadowOffsetY=0;
		   cobj.shadowBlur=0;
           //画刻度
		   drawMark ()
           //画刻度的函数
		   function drawMark () {
		     for (var i=0; i<60; i++) {
			   var angle=i*6*Math.PI/180;
			   var radius1=radius-4;
			   var lw=2;
			   if(i%5==0){
			     radius1=radius-8;
				 lw=4
			   }
			   cobj.strokeStyle="#888";
			   cobj.lineWidth=lw;
			   cobj.beginPath();
			   cobj.moveTo(originx+radius*Math.cos(angle),originy+radius*Math.sin(angle));
			   cobj.lineTo(originx+(radius1)*Math.cos(angle),originy+(radius1)*Math.sin(angle));
			   cobj.stroke();
		     }
		   }
		}
		</script>
	</head>
	<body>
		<canvas id="canvas" width=400 height=400>
		</canvas>
	</body>
</html>