HTML5（六）html5＜canvas带音效的时钟＞

最新推荐文章于 2024-09-19 23:55:48 发布

原创

最新推荐文章于 2024-09-19 23:55:48 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

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,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,originy,100);
					colorObj.addColorStop(0,"#efefef");
					colorObj.addColorStop(1,"#cecece");