canvas个性化时钟

最新推荐文章于 2022-11-22 08:54:35 发布

码小龙

最新推荐文章于 2022-11-22 08:54:35 发布

阅读量993

点赞数 4

分类专栏：原生js 个性化时钟 audio 文章标签： canvas js

本文链接：https://blog.csdn.net/yuan_xiao_long/article/details/116355997

版权

效果演示

在这里插入图片描述

简介

十二小时制的时钟，时刻度在圆盘上面显示，交叉线顶角为分和秒的刻度。
时分秒：最小的是秒、中等的是分、圈内的蓝点为时。
中心圆：随着秒钟缩小，数字时钟的显示。
秒钟走动的声音，每小时和每3小时的有语音提示。

代码

html

		<canvas id="can" width="860px" height="860px">
		</canvas>
		<!-- 音乐 -->
		<audio src="./audio/7987.mp3" id="aud" loop="loop" ></audio>

css

		<style type="text/css">
			body{
    text-align: center;background-color: black}
		</style>

js代码配合js功能函数使用

	// 获取声音
	var aud = document.getElementById('aud');
	// 点击开启声音
	document.addEventListener('click',startTime)
	function startTime(){
   
		aud.play();
		document.removeEventListener('click',startTime);// 开启声音后解绑事件
	}
	// 解决时间晚一秒的问题
	window.onload = function(){
   
		clock();
	}
	
	// 获取画布
	var can = document.getElementById('can');
	// 获取画笔
	var cx = can.getContext('2d');
	cx.translate(420,420);// 设置中心点 默认值
	
	setInterval(clock,1000);// 使用定时器调用 clock函数
	var zgongxinyuan = 246;// 控制中心圆的大小
	function clock(){
   
		// 清除绘画区
		cx.clearRect(-420,-420,860,860);
		
		// 获取当前时间对象
		var today = new Date();
		var hour = today.getHours();//时
		var min = today.getMinutes();//分
		var secd = today.getSeconds();//秒
		zgongxinyuan -=1;// 改变中心圆的大小
		if(secd==0){
   
			zgongxinyuan = 246;// 中心圆的半径
		}
		
		
		// 绘制表盘
		cx.beginPath();
		cx.arc(0,0,395,0,Math.PI*2,true);
		cx.strokeStyle = 'rgba(0,100,100,.4)';
		cx.lineWidth = '10';
		cx.stroke