canvas时钟,采用Math.sin和cos实现x代码,Css代码库,德仔网

代码语言

代码分类

【Css】 canvas时钟,采用Math.sin和cos实现x

作者:hello_potato / 发布于2014/12/30/ 671

canvas中采用sin和cos求出圆上的点绘制简单时钟;没使用canvas的rotate;


	<html>
	<head>
	 <meta charset="utf-8">
	 <title>canvas练习-时钟</title>
	</head>
	<style>
	* {
	 margin: 0;
	 padding: 0;
	}
	</style>
	<body>
	 <canvas id="canvas" width="500" height="500">您的浏览器不支持Canvas!</canvas>
	</body>
	</html>

	

	<script>
	var XCENTER = 250, YCENTER = 250, RADIUS = 150, HoursPerSecond = 360 / (12 * 3600), MinutesPerSecond = 0.1, SecondPerSecond = 6;
	
	window.onload = function() {
	 var canvas = document.getElementById('canvas');
	 var context = canvas.getContext('2d');
	
	 renderClock(context)
	 setInterval(function() {
	 renderClock(context);
	 }, 1000);
	}
	//画圆
	function renderClock(cxt) {
	 cxt.clearRect(0, 0, 500, 500);
	 //绘制圆
	 cxt.beginPath();
	 cxt.strokeStyle = '#000';
	 cxt.lineWidth = 1;
	 cxt.arc(XCENTER, YCENTER, RADIUS, 0 ,2*Math.PI);
	 cxt.stroke();
	 cxt.closePath();
	
	 //绘制小时刻度
	 for(var i = 0; i < 60; i++) {
	 cxt.beginPath();
	 cxt.lineWidth = 2;
	 if (i % 5 == 0) {
	 drawLine(XCENTER, YCENTER, i / 5 * 30, RADIUS, 20, 'scale', cxt);
	 } else {
	 drawLine(XCENTER, YCENTER, i * 6, RADIUS, 10, 'scale', cxt);
	 }
	 cxt.closePath();
	 }
	 renderPointer(cxt)
	}
	//渲染针
	function renderPointer(cxt) {
	 cxt.beginPath();
	 cxt.lineWidth = 3;
	 drawLine(XCENTER, YCENTER, getCurrentTime() * HoursPerSecond, RADIUS, 60, 'pointer', cxt); //时针
	 cxt.lineWidth = 2;
	 drawLine(XCENTER, YCENTER, getCurrentTime() * MinutesPerSecond, RADIUS, 30, 'pointer', cxt); //分针
	 cxt.lineWidth = 1;
	 drawLine(XCENTER, YCENTER, getCurrentTime() * SecondPerSecond, RADIUS, 20, 'pointer', cxt); //秒针
	}
	//获取时间
	function getCurrentTime() {
	 var currentTime = new Date();
	 var resTime = currentTime.getHours() * 3600 + currentTime.getMinutes() * 60 + currentTime.getSeconds(); //秒数;
	 return resTime;
	}
	//获取坐标画线
	function drawLine(x, y, deg, r, j, target, cxt) {
	 var coord = {
	 x : x + Math.sin(changeRadian(deg)) * r,
	 y : y - Math.cos(changeRadian(deg)) * r,
	 x1 : x + Math.sin(changeRadian(deg)) * (r - j),
	 y1 : y - Math.cos(changeRadian(deg)) * (r - j)
	 }
	 if (target == 'scale') { //刻度
	 cxt.moveTo(coord.x, coord.y);
	 } else if (target == 'pointer') { //针
	 cxt.moveTo(x, y);
	 }
	 cxt.lineTo(coord.x1, coord.y1);
	 cxt.stroke();
	}
	//角度转换为弧度
	function changeRadian(deg) {
	 return Math.PI / 180 * deg;
	}
	</script>

试试其它关键字

　canvas　　时钟　　　　v　

同语言下

可能有用的

hello_potato贡献的其它代码(1)

.canvas时钟,采用Math.sin和cos实现x