                        課程
                    
                        /前端開發(fā)
                        
                            /Html5
                        
                        /Canvas 繪制時鐘

請問誰有碼源吧

請問請有碼源啊

01:52

lushuhua

2017-02-16

源自：Canvas 繪制時鐘 2-1

關注問題我要回答

1124

操作

收起

2 回答

慕用4156828
2017-02-16

其實最后一步?jīng)]做！

0 回復有任何疑惑可以回復我~

收起回答

慕用4156828
2017-02-16

<!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>