<!DOCTYPE html>
<html>
<head>
<style>
canvas{
background:#eee; margin:30px 400px;
}
</style>
<title>時鐘完整版</title>
<meta charset="">
<link rel="stylesheet" href="">
<script>
window.οnlοad=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.οntimeupdate=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");
cobj.fillStyle=colorObj;
cobj.lineWidth=8;
cobj.beginPath();
cobj.strokeStyle=colorObj;
cobj.arc(originx,originy,radius,0,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.fillStyle="#aaa";
cobj.beginPath();
cobj.arc(originx,originy,4,0,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 id="canvas" width=400 height=400>
</canvas>
<audio src="1.wav" id="audio">
</audio>
</body>
</html>
時鐘完整版
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.