Home >Web Front-end >HTML Tutorial >Use html5 to create a clock animation_html/css_WEB-ITnose

Use html5 to create a clock animation_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:59:491200browse

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);

 

 

 

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn