<!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();?? ??? ??? ??? ??? ??? ?//整點(diǎn)刻度?? ??? ?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;?? ??? ??? ?//時(shí)針?? ??? ??? ??? ??? ??? ?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 關(guān)注
- 1622 瀏覽
添加回答
舉報(bào)
0/150
提交
取消