|
本帖最后由 zyw 于 2016-10-10 13:24 编辑
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>时钟</title>
- <style type="text/css">
- canvas{
- background-color:grey;
- }
- </style>
- <script type="text/javascript">
- var date=new Date();
- var h=date.getHours();
- var m=date.getMinutes();
- var s=date.getSeconds();
- //m=25;
- //s=58;
- s=s-15;
- m=m-15;
- h=(h%12)*5+0-15+((m+15)/12);
- window.onload=function (){
- var can=document.getElementById('can');
- var draw=can.getContext("2d");
- function drawMark(){
- draw.shadowColor="#ccc";
- draw.shadowOffsetX=1;
- draw.shadowOffsetY=1;
- draw.shadowBlur=5;
- var cg=draw.createRadialGradient(200,200,10,200,200,80);
- cg.addColorStop(0,"white");
- cg.addColorStop(0.7,"#ccc");
- cg.addColorStop(1,"#ccc");
- draw.beginPath();
- draw.fillStyle=cg;
- draw.arc(200,200,100,0,Math.PI*2);
- draw.stroke();
- draw.fill();
- for(var i=0;i<60;i++) {
- var r=0;
- var lw=0;
- if(i%5==0) {
- lw=3;
- r=82;
- } else {
- lw=1;
- r=90;
- }
- draw.beginPath();
- draw.lineWidth=lw;
- draw.moveTo(200+100*Math.cos(6*i*Math.PI/180),200+100*Math.sin(6*i*Math.PI/180));
- draw.lineTo(200+r*Math.cos(6*i*Math.PI/180),200+r*Math.sin(6*i*Math.PI/180));
- draw.stroke();
- }
- draw.beginPath();
- draw.fillStyle="black";
- draw.arc(200,200,5,0,Math.PI*2);
- draw.stroke();
- draw.fill();
- }
- function Hours(){
- draw.beginPath();
- draw.moveTo(200,200);
- var i=0;
- r=80;
- draw.lineTo(200+r*Math.cos(6*i*Math.PI/180),200+r*Math.sin(6*i*Math.PI/180));
- draw.stroke();
- }
- function Hours(i){
- draw.beginPath();
- draw.lineWidth=3;
- draw.moveTo(200,200);
- r=60;
- draw.lineTo(200+r*Math.cos(6*i*Math.PI/180),200+r*Math.sin(6*i*Math.PI/180));
- draw.stroke();
- }
- function Minutes(i){
- draw.beginPath();
- draw.lineWidth=2;
- draw.moveTo(200,200);
- r=70;
- draw.lineTo(200+r*Math.cos(6*i*Math.PI/180),200+r*Math.sin(6*i*Math.PI/180));
- draw.stroke();
- }
- function Seconds(i){
- draw.beginPath();
- draw.lineWidth=1;
- draw.moveTo(200,200);
- r=80;
- draw.lineTo(200+r*Math.cos(6*i*Math.PI/180),200+r*Math.sin(6*i*Math.PI/180));
- draw.stroke();
- }
- drawMark();
- Hours(h);
- Minutes(m);
- Seconds(s);
- setInterval(function (){
- var date=new Date();
- h=date.getHours();
- m=date.getMinutes()-15;
- s=date.getSeconds()-15;
- h=(h%12)*5+0-15+((m+15)/12);
- draw.clearRect(0,0,400,400);
- drawMark();
- Hours(h);
- Seconds(s);
- Minutes(m);
- },1000);
- }
- </script>
- </head>
- <body>
- <canvas width="400" height="400" id="can">你的浏览器out了</canvas>
- </body>
- </html>
复制代码 示例演示
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
|