canvas圆形时钟效果代码-html代码-BFW代码库

canvas圆形时钟效果代码

代码语言：html

代码描述：canvas圆形时钟效果代码

代码标签：效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">


<style type="text/css">
	#myCanvas{
		display: block;
		margin:10px auto;
	}
</style>

</head>
<body>

<canvas id="myCanvas" width="400" height="400"></canvas>
<script type="text/javascript">
	var myCanvas = document.getElementById('myCanvas');
	var c = myCanvas.getContext('2d');
	function clock(){
		c.clearRect(0,0,400,400);
		var data = new Date();
		var sec =data.getSeconds();
		var min =data.getMinutes();
		var hour=data.getHours();
		
		c.save();
		c.translate(200,200);
		c.rotate(-Math.PI/2);

		
		//分钟刻度线
		for(var i=0;i<60;i++){	//画12个刻度线			
			c.beginPath();
			c.strokeStyle = "#f00";				
			c.lineWidth = 5 ;
			c.moveTo(117,0);
			c.lineTo(120,0);
			c.stroke();
			c.rotate(Math.PI/30); //每个6deg画一个时钟刻度线
			c.closePath();
		}
		
		
		//时钟刻度线
		for(var i=0;i<12;i++){	//画12个刻度线			
			c.beginPath();
			c.strokeStyle = "#000";				
			c.lineWidth = 8 ;
			c.moveTo(100,0);
			c.lineTo(120,0);
			c.stroke();
			c.rotate(Math.PI/6);.........完整代码请登录后点击上方下载按钮下载查看