您的位置：首页 > Web前端 > JavaScript

用canvas和js画了个钟表，跟大家分享一下

2016-09-21 08:03 441 查看 
<pre name="code" class="javascript">(function () {
var mycanvas=document.getElementById("mycanvas");
var otex=mycanvas.getContext("2d");
function time() {
otex.clearRect(0,0,500,500);
//画大圆
otex.beginPath();
otex.arc(250,250,200,0,2*Math.PI);
otex.strokeStyle="#abcdef";
otex.lineWidth=10;
otex.closePath();
otex.stroke();

//秒针
otex.strokeStyle="grey";
otex.lineWidth=5;
for(var i=0;i<60;i++){
otex.save();
otex.beginPath();
otex.translate(250,250);
otex.rotate(i*6*Math.PI/180);
otex.moveTo(0,-195);
otex.lineTo(0,-180);
otex.closePath();
otex.stroke();
otex.restore();
}

//画时针针
otex.strokeStyle="blue";
otex.lineWidth=10;

for(var i=0;i<12;i++){
otex.save();//记得使用
otex.beginPath();
otex.translate(250,250);
otex.rotate(i*30*Math.PI/180);
otex.moveTo(0,-175);
otex.lineTo(0,-195);
otex.closePath();
otex.stroke();
otex.restore();//记得使用
}

var now=new Date();
var h=now.getHours();
var m=now.getMinutes();
var s=now.getSeconds();

//计算小时
otex.save();//记得使用
otex.beginPath();
otex.strokeStyle="blue";
otex.lineWidth=5;
otex.translate(250,250);
otex.rotate((h+m/60)*30*Math.PI/180);
otex.moveTo(0,10);
otex.lineTo(0,-125);
otex.closePath();
otex.stroke();
otex.restore();//记得使用

//分
otex.save();//记得使用
otex.beginPath();
otex.strokeStyle="red";
otex.lineWidth=4;
otex.translate(250,250);
otex.rotate((m+s/60)*6*Math.PI/180);
otex.moveTo(0,10);
otex.lineTo(0,-165);
otex.closePath();
otex.stroke();
otex.restore();//记得使用

//秒
otex.save();//记得使用
otex.beginPath();
otex.strokeStyle="red";
otex.lineWidth=4;
otex.translate(250,250);
otex.rotate(s*6*Math.PI/180);
otex.moveTo(0,10);
otex.lineTo(0,-185);
otex.closePath();
otex.stroke();
otex.restore();//记得使用
}
time();
setInterval(time,1000)
})();


<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>钟表</title></head><style> *{margin: 0;padding: 0;}</style><body> <canvas id="mycanvas" width="500" height="600" style=" position: relative;left:0;right:0;margin:0 auto"> </canvas><script src="main.js"></script></body>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                canvas
                                                钟表
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                

                    
                

            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航