利用html5制作一个时钟动画_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

利用html5制作一个时钟动画_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:59 AM

html5 使用製作動畫時鐘

1 <canvas id="clock" width="500" height="500" style="background-color: yellow"></canvas>

登入後複製

  1 var clock=document.getElementById("clock");  2     var cxt=clock.getContext("2d");  3 function drawNow(){  4     var now=new Date();  5     var hour=now.getHours();  6     var min=now.getMinutes();  7     var sec=now.getSeconds();  8     hour=hour>12?hour-12:hour;  9     hour=hour+min/60; 10     //表盘(蓝色) 11     cxt.lineWidth=10; 12     cxt.strokeStyle="blue" 13     cxt.beginPath(); 14     cxt.arc(250,250,200,0,360,false); 15     cxt.closePath(); 16     cxt.stroke(); 17     //刻度 18     //时刻度 19     for(var i=0;i<12;i++){ 20         cxt.save(); 21         cxt.lineWidth=7; 22         cxt.strokeStyle="black"; 23         cxt.translate(250,250); 24         cxt.rotate(i*30*Math.PI/180);//旋转角度  角度*Math.PI/180=弧度 25         cxt.beginPath(); 26         cxt.moveTo(0,-170); 27         cxt.lineTo(0,-190); 28         cxt.closePath(); 29         cxt.stroke(); 30         cxt.restore(); 31     } 32     //分刻度 33     for(var i=0;i<60;i++){ 34         cxt.save(); 35         //设置分刻度的粗细 36         cxt.lineWidth=5; 37         //重置画布原点 38         cxt.translate(250,250); 39         //设置旋转角度 40         cxt.rotate(i*6*Math.PI/180); 41         //画分针刻度 42         cxt.strokeStyle="black"; 43         cxt.beginPath(); 44         cxt.moveTo(0,-180); 45         cxt.lineTo(0,-190); 46         cxt.closePath(); 47         cxt.stroke(); 48         cxt.restore(); 49     } 50  51     //时针 52     cxt.save(); 53     // 设置时针风格 54     cxt.lineWidth=7; 55     cxt.strokeStyle="black"; 56     cxt.translate(250,250); 57     cxt.rotate(hour*30*Math.PI/180); 58     cxt.beginPath(); 59     cxt.moveTo(0,-140); 60     cxt.lineTo(0,10); 61     cxt.closePath(); 62     cxt.stroke(); 63     cxt.restore(); 64     //分针 65     cxt.save(); 66     cxt.lineWidth=5; 67     cxt.strokeStyle="black"; 68     //设置异次元空间分针画布的中心 69     cxt.translate(250,250); 70     cxt.rotate(min*6*Math.PI/180); 71     cxt.beginPath(); 72     cxt.moveTo(0,-160); 73     cxt.lineTo(0,15); 74     cxt.closePath(); 75     cxt.stroke() 76     cxt.restore(); 77  78     //秒针 79     cxt.save(); 80     //设置秒针的风格 81     //颜色:红色 82     cxt.strokeStyle="red"; 83     cxt.lineWidth=3; 84     //重置原点 85     cxt.translate(250,250); 86     //设置角度 87     //cxt.rotate(330*Math.PI/180); 88     cxt.rotate(sec*6*Math.PI/180); 89  90     cxt.beginPath(); 91     cxt.moveTo(0,-170); 92     cxt.lineTo(0,20); 93     cxt.closePath(); 94     cxt.stroke(); 95     //画出时针,分针,秒针的交叉点 96     cxt.beginPath(); 97     cxt.arc(0,0,5,0,360,false); 98     cxt.closePath(); 99     //设置填充100     cxt.fillStyle="gray";101     cxt.fill();102     //cxt.strokeStyle="red";103     cxt.stroke();104 105     //画出秒针的小圆点106     cxt.beginPath();107     cxt.arc(0,-140,5,0,360,false);108     cxt.closePath();109     //设置填充110     cxt.fillStyle="gray";111     cxt.fill();112     //cxt.strokeStyle="red";113     cxt.stroke();114 115 116     cxt.restore();117 118 119 120 }121 function drawClock(){122     cxt.clearRect(0,0,500,500);123     drawNow();124 }125     drawNow();126     setInterval(drawClock,1000);

登入後複製