分类导航

HTML5 发布时间：2022-04-25 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了HTML5（六）html5＜canvas带音效的时钟＞，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

html5的canvas实现带音效的时钟

<!DOCTYPE html>
<html>
	<head>
		<title>canvas</title>
		<style>
			canvas{
				BACkground:#eee;
			}
		</style>
		<script>
			window.onload=function(){
				var canvas = document.getElementById("canvas");
				var cobj = canvas.getContext("2d");
				var originx=200;
				var originy=200;
				var radius=100;
				var audio = document.getElementById("audio");
				audio.ontimeupdate=function(){
					if(audio.currentTime>=0.1){
						audio.pause();
					}
				}
				

				seTinterval(function(){
					cobj.clearRect(0,400,400);
					audio.currentTime=0;
					audio.play();
					//阴影
					cobj.shadowColor="#888";
					cobj.shadowOffsetX=1;
					cobj.shadowOffsetY=1;
					cobj.shadowBlur=3;

					//渐变色
					var colorObj = cobj.createRadialGradient(originx,originy,1,originx,100);
					colorObj.addColorStop(0,"#efefef");
					colorObj.addColorStop(1,"#cecece");
					cobj.fillStyle=colorObj;
					cobj.lineWidth=8;
					cobj.strokeStyle=colorObj;

					
					cobj.beginPath();
					cobj.arc(originx,radius,2*Math.PI);
					cobj.stroke();
					cobj.fill();

					//去掉阴影
					cobj.shadowColor="#888";
					cobj.shadowOffsetX=0;
					cobj.shadowOffsetY=0;
					cobj.shadowBlur=0;

					//画刻度
					drawMark();

					//画针
					var date = new Date();
					var ha = date.getHours()*30+(date.getminutes()*6/12)-90;
					var ma = date.getminutes()*6-90;
					var sa = date.getSeconds()*6-90;
					//时针
					drawPointer(55,ha,4,"#000");
					//分针
					drawPointer(65,ma,3,"#888");
					//秒针
					drawPointer(75,sa,2,"#ff0000");

					//画小圆
					cobj.shadowColor="#888";
					cobj.shadowOffsetX=1;
					cobj.shadowOffsetY=1;
					cobj.shadowBlur=3;
					cobj.beginPath();
					cobj.fillStyle="#aaa";
					cobj.arc(originx,2*Math.PI);
					cobj.fill();
				},1000);

				//画针的函数
				function drawPointer(radius,angle,width,color){
					cobj.lineWidth=width;
					cobj.strokeStyle=color;
					cobj.beginPath();
					cobj.moveTo(originx,originy);
					cobj.lineTo(originx+radius*Math.cos(angle*Math.PI/180),originy+radius*Math.sin(angle*Math.PI/180));
					cobj.stroke();
				}

				//画刻度的函数
				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 width="400px" height="400px" id="canvas">
			请您升级浏览器
		</canvas>
		<audio src="1.wav" id="audio">
		</audio>
	</body>
</html>