请问谁有码源吧
来源：2-1 Canvas 绘制时钟--几何模型
lushuhua
2017-02-16 09:06
请问请有码源啊
写回答
关注
2回答
-
- 慕用4156828
- 2017-02-16 19:47:44
其实最后一步没做！
-
- 慕用4156828
- 2017-02-16 19:47:03
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ text-align: center; margin-top:250px; } #clock{ border:1px solid #ccc; } </style> </head> <body> <div> <canvas id="clock" height="200px" width="200px"></canvas> </div> <script type="text/javascript " > var dom=document.getElementById('clock'); var ctx=dom.getContext('2d'); var width=ctx.canvas.width; var height=ctx.canvas .height ; var r=width/2; function drawbackgroud() { ctx.save(); ctx.translate(r,r); ctx.beginPath(); ctx.lineWidth=5; ctx.arc(0,0,r-5,0,2*Math.PI,false); ctx.stroke (); var hournumbers=[3,4,5,6,7,8,9,10,11,12,1,2]; ctx.font ='18px-Arial'; ctx.textAlign="center"; ctx.textBaseline ="middle"; hournumbers.forEach(function (number,i) { var rad=2*Math.PI/12*i; var x=Math.cos(rad)*(r-30); var y=Math .sin(rad)*(r-30); ctx.fillText(number,x,y); }); for(var i=0;i<60;i++){ ctx.save(); var rad=2*Math.PI/60*i; var x=Math.cos(rad)*(r-20); var y=Math .sin(rad)*(r-20); ctx.beginPath(); if(i%5===0){ ctx.fillStyle="#bb2623"; ctx.arc(x,y,3,0,2*Math.PI,false);} else{ ctx.fillStyle="#ccc"; ctx.arc(x,y,2,0,2*Math.PI,false);} ctx.fill(); ctx.restore(); } for(var j=0;j<60;j++){ ctx.save(); var ra=2*Math.PI/60*j; var t=Math.cos(ra)*(r-40); var h=Math.sin(ra)*(r-40); ctx.beginPath(); ctx.fillStyle="#463EBB"; ctx.arc(t,h,2,0,2*Math.PI,false); ctx.fill(); ctx.restore(); } //上面的一个for是自己瞎搞的。。。 } function dawhouse(hour) { ctx.save(); ctx.beginPath(); var rad=2*Math.PI/12*hour; ctx.rotate(rad); ctx.lineWidth =5; ctx.lineCap ='round'; ctx.moveTo(0,10); ctx.lineTo(0,-r/2+10); ctx.stroke(); ctx.restore(); } function dawfen(fen) { ctx.save(); ctx.beginPath(); var rad=2*Math.PI/60*fen; ctx.rotate(rad); ctx.lineWidth =3; ctx.lineCap ='round'; ctx.moveTo(0,15); ctx.lineTo(0,-r/2); ctx.strokeStyle="green"; ctx.stroke(); ctx.restore(); } function dawscond(miao) { ctx.save(); ctx.beginPath(); var rad=2*Math.PI/60*miao; ctx.rotate(rad); ctx.lineWidth =1.5; ctx.lineCap ='round'; ctx.moveTo(-2,18); ctx.lineTo(2,18); ctx.lineTo(1,-r+18); ctx.lineTo(-1,-r+18); ctx.fill(); ctx.fillStyle="#8fbb27"; ctx.restore(); } function derayuan() { ctx.beginPath(); ctx.arc(0,0,4,0,2*Math.PI,false); ctx.fill(); ctx.fillStyle="#c8cc5d"; } function yud() { ctx.clearRect(0,0,width,height); var d=new Date(); var h=d.getHours(); var f=d.getMinutes(); var m=d.getSeconds(); drawbackgroud(); dawhouse(h); dawfen(f); dawscond(m); derayuan(); ctx.restore(); } setInterval(yud,1000); </script> </body> </html>
Canvas 绘制时钟
canvas画出漂亮的时钟，通过本教程能重新掌握一些几何知识
49750 学习 · 160 问题
相似问题