<!doctype html><html> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <body> <canvas id="clock" width="500" height="500" style="background:#800040">你的浏览器不支持canavas!</canvas> <script> function colock(){ var oP=document.getElementById('clock'); var env=clock.getContext('2d'); env.clearRect(0,0,500,500); env.lineWidth="10" env.strokeStyle="yellow"; env.beginPath(); env.arc(250,250,200,0,180,false); env.stroke(); env.closePath(); //整点刻度 for(var i=0;i<12;i++){ env.save(); env.lineWidth=9; env.strokeStyle="#000000"; env.translate(250,250); env.rotate(i*30*Math.PI/180); env.beginPath(); env.moveTo(0,-200); env.lineTo(0,-170); env.closePath(); env.stroke(); env.restore(); } //分钟刻度 for(var i=0;i<60;i++){ env.save(); env.lineWidth=7; env.strokeStyle="red"; env.translate(250,250); env.rotate(i*6*Math.PI/180); env.beginPath(); env.moveTo(0,-190); env.lineTo(0,-180); env.closePath(); env.stroke(); env.restore(); } var date=new Date(); var hour=date.getHours(); var second=date.getSeconds(); var minute=date.getMinutes(); var hour=hour>12?hour=hour-12:hour; var hour=hour+minute/60; //时针 env.save(); env.lineWidth=9; env.strokeStyle="#000033"; env.translate(250,250); env.rotate(hour*30*Math.PI/180); env.beginPath(); env.moveTo(0,-100); env.lineTo(0,4); env.closePath(); env.stroke(); env.restore(); //分针 env.save(); env.lineWidth=7; env.strokeStyle="#ff0033"; env.translate(250,250); env.rotate(minute*6*Math.PI/180); env.beginPath(); env.moveTo(0,-140); env.lineTo(0,4); env.closePath(); env.stroke(); env.restore(); //秒针 env.save(); env.lineWidth=3; env.strokeStyle="#000000"; env.translate(250,250); env.rotate(second*6*Math.PI/180); env.beginPath(); env.moveTo(0,-160); env.lineTo(0,4); env.closePath(); env.stroke(); env.beginPath(); env.arc(0,-120,5,0,360,false); env.closePath(); env.stroke(); env.restore(); } colock(); setInterval("colock()",3); </script> </body></html>
- 1 回答
- 0 关注
- 1576 浏览
添加回答
举报
0/150
提交
取消