                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /Canvas 绘制时钟

请问谁有码源吧

请问请有码源啊

01:52

lushuhua

2017-02-16

源自：Canvas 绘制时钟 2-1

关注问题我要回答

1134

操作

收起

2 回答

慕用4156828
2017-02-16

其实最后一步没做！

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>