Canvas绘制时钟

最新推荐文章于 2023-03-30 16:19:17 发布

原创最新推荐文章于 2023-03-30 16:19:17 发布 · 612 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #时钟

HTML(5) 同时被 3 个专栏收录

3 篇文章

订阅专栏

JavaScript

2 篇文章

订阅专栏

CSS(3)

1 篇文章

订阅专栏

一、效果图展示

二、相关代码

1.clock.html

<!DOCTYPE html>
<html>
  <head>
    <title>时钟</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style>
    *{
    	padding:0;
    	margin:0;
    }
    
    .canvas{
    	border:1px solid black;
    	margin-top:20px;
    	margin-left:20px;
    }
    </style>

  </head>
  
  <body onload="load()">
    <canvas id="canvasID" class="canvas" width="500px" height="400px"></canvas>
    <script type="text/javascript" src="clock.js"></script>
  </body>
</html>

2.clock.js

var Canvas = {};
Canvas.context = document.getElementById("canvasID").getContext("2d");
Canvas.Point = function(x,y){
	this.x = x;
	this.y = y;
}

Canvas.Clock = function(){
	var that = Canvas;
	var c = that.context;
	var radius = 150;//圆的半径
	var scale = 20;//刻度长度
	var hourangle = (1/6)*Math.PI;//每走一小时要偏转的角度
	var minangle = (1/30)*Math.PI;//每周一分钟（或秒）要偏转的角度
	var hourLen = (1/2)*radius;//时针长度
	var minLen = (2/3)*radius;//分针长度
	var secLen = (9/10)*radius;//秒针长度
	var center = new that.Point(c.canvas.width/2,c.canvas.height/2); //圆心
	
	//绘制圆心
	function drawCenter(){
		c.save();
		
		//圆心为起点
		c.translate(center.x,center.y);
		
		c.beginPath();
		c.arc(0,0,radius/20,0,2*Math.PI);
		c.fill(); //填充圆心
		c.closePath();
		
		c.stroke();
		
		c.restore();
	}
	
	//绘制外圆和刻度
	function drawBackground(){
		c.save();
		
		//圆心为起点
		c.translate(center.x,center.y);
		
		//绘制外圆
		c.beginPath();
		c.arc(0,0,radius,0,2*Math.PI);
		c.closePath();
		
		//绘制小时刻度
		for(var i=1;i<=12;i++){
			c.rotate(hourangle);
			c.moveTo(radius-scale,0);
			c.lineTo(radius,0);
		}
		
		//绘制分钟刻度
		for(var i=1;i<=60;i++){
			c.rotate(minangle);
			c.moveTo(radius-scale+10,0);
			c.lineTo(radius,0);
		}
		
		//绘制时间数字
		c.font = "bold 20px Microsoft Yahei";
		c.fillText("12",-15,-110);
		c.fillText("6",-5,125);
		c.fillText("3",115,5);
		c.fillText("9",-125,5);
		
		c.fillText("1",55,-95);
		c.fillText("2",95,-55);
		c.fillText("4",95,70);
		c.fillText("5",50,110);
		
		c.fillText("11",-70,-95);
		c.fillText("10",-115,-50);
		c.fillText("8",-110,65);
		c.fillText("7",-65,110);
		
		c.stroke();
		c.restore();
	}
	
	this.drawHourHand = function(h){
		h = (h===0)?24:h; //24小时制
		c.save();
		c.translate(center.x,center.y);
		
		c.beginPath();
		c.rotate((3/2)*Math.PI);//旋转270度从12点开始
		c.rotate(h*hourangle);//按小时旋转
		c.moveTo(0,0);
		c.lineTo(hourLen,0);
		c.closePath();
		
		c.stroke();
		c.restore();
	}
	
	this.drawMinHand = function(m){
		m = (m===0)?60:m; //24小时制
		c.save();
		c.translate(center.x,center.y);
		
		c.beginPath();
		c.rotate((3/2)*Math.PI);//旋转270度从12点开始
		c.rotate(m*minangle);//按分钟旋转
		c.moveTo(0,0);
		c.lineTo(minLen,0);
		c.closePath();
		
		c.stroke();
		c.restore();
	}
	
	this.drawSecHand = function(s){
		s = (s===0)?60:s; //24小时制
		c.save();
		c.translate(center.x,center.y);
		
		c.beginPath();
		c.strokeStyle = "red";
		c.rotate((3/2)*Math.PI);//旋转270度从12点开始
		c.rotate(s*minangle);//按秒旋转
		c.moveTo(0,0);
		c.lineTo(secLen,0);
		c.closePath();
		
		c.stroke();
		c.restore();
	}
	
	this.drawClock = function(){
		var that = this;
		
		function draw(){
			var date = new Date();
			
			//先清空面板，在绘制圆心、外圆和刻度，最后绘制时针分针以及秒针
			Canvas.clearContext();
			drawCenter();
			drawBackground();
			that.drawHourHand(date.getHours()+date.getMinutes()/60);
			that.drawMinHand(date.getMinutes()+date.getSeconds()/60);
			that.drawSecHand(date.getSeconds());
		}
		
		draw();
		setInterval(draw,1000);
	}
	
}

//清空面板
Canvas.clearContext = function(){
	var that = this;
	var c = that.context;
	c.clearRect(0,0,c.canvas.offsetWidth,c.canvas.offsetHeight);
}

function load(){
	var clock = new Canvas.Clock();
	clock.drawClock();
}

三、相关知识

context.rotate(angle)：旋转图形angle度。

context.translate(x,y)：将点(x,y)设置为绘图原点(0,0)。

context.save()：将当前图形的一份状态保存在保存图形的栈中。

context.restore()：将save()压入栈中的状态弹出，并将所有相关的属性设置给弹出状态的属性值。

setInterval(code,time)：按照指定时间执行code代码或者code函数。