使用html5 canvas 制作时钟

最新推荐文章于 2019-09-18 15:24:34 发布

fonglezen

最新推荐文章于 2019-09-18 15:24:34 发布

阅读量782

点赞数

分类专栏：前端小思

本文链接：https://blog.csdn.net/wuweitiandian/article/details/40976913

版权

前端小思专栏收录该内容

43 篇文章 0 订阅

订阅专栏

使用html5+canvas制作一个网页的时钟。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas clock _fonglezen的前端小站</title>
</head>

<body>
<canvas width="500" height="500" id="canvas">你的破浏览器不支持HTML5，赶紧卸载了吧！！下载最新的浏览器，拥有更好的上网体验！</canvas>
<script>
    var can = document.getElementById('canvas');
    var con = can.getContext('2d');
    
    
    function drawclock(){
        con.clearRect(0,0,500,500);
        var now = new Date();
        
        //add logo
        con.save();
        con.beginPath();
        con.fillStyle = '#e5e5e5';
        con.font = '40px 微软雅黑';
        con.fillText('fonglezen',150,350,500);
        con.closePath();
        con.restore();
        
        //draw circle clock
        con.beginPath();
        con.lineWidth = 10;
        con.strokeStyle = '#666';
        con.arc(250,250,200,0,360,false);
        con.stroke();
        con.closePath();
        
        //draw second
        for(var i = 0; i < 60 ; i++){
            con.save();
            con.beginPath();
            con.translate(250,250);
            con.rotate(i*6*Math.PI/180);
            con.lineWidth = 5;
            con.strokeStyle = '#ccc'; 
            con.moveTo(0,-175);
            con.lineTo(0,-190);
            con.stroke();
            con.closePath();
            con.restore();
        }
        
        //draw quarter
        for(var i = 0; i < 12; i++){
            con.save();
            con.beginPath();
            con.translate(250,250);
            con.rotate(i*30*Math.PI/180);
            con.moveTo(0,-170);
            con.lineTo(0,-190);
            con.stroke();
            con.closePath();
            con.restore();
        }
        
        //draw hours zhen
        var nowhours = now.getHours();
        if(nowhours > 12){
            nowhours = nowhours - 12;
        }
        con.save();
        con.beginPath();
        con.translate(250,250);
        con.rotate(now.getHours()*30*Math.PI/180);
        con.lineWidth = 8;
        con.strokeStyle = '#000';
        con.moveTo(0,20);
        con.lineTo(0,-110);
        con.stroke();
        con.closePath();
        con.restore();
        
        
        //draw min zhen
        con.save();
        con.beginPath();
        con.translate(250,250);
        con.rotate(now.getMinutes()*6*Math.PI/180);
        con.lineWidth = 8;
        con.strokeStyle = '#000';
        con.moveTo(0,20);
        con.lineTo(0,-150);
        con.stroke();
        con.closePath();
        con.restore();
        
        
        //draw second zhen
        con.save();
        con.beginPath();
        con.translate(250,250);
        con.rotate(now.getSeconds()*6*Math.PI/180);
        con.lineWidth = 2;
        con.strokeStyle = '#f00';
        con.moveTo(0,20);
        con.lineTo(0,-180);
        con.stroke();
        con.closePath();
        con.restore();
        
        //center circle
        con.save();
        con.beginPath();
        con.fillStyle = '#f00';
        con.arc(250,250,7,0,360,false);
        con.fill();
        con.closePath();
        con.restore();
        
    }
    
    drawclock();
    setInterval(drawclock,1000);

</script>
</body>
</html>

fonglezen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用html5 canvas 制作时钟

使用html5+canvas制作一个网页的时钟。canvas clock _fonglezen的前端小站你的破浏览器不支持HTML5，赶紧卸载了吧！！下载最新的浏览器，拥有更好的上网体验！ var can = document.getElementById('canvas'); var con = can.getContext('2d');
复制链接

扫一扫