利用canvas完成钟表的绘制

最新推荐文章于 2024-06-13 06:20:33 发布

jiaopangzi

最新推荐文章于 2024-06-13 06:20:33 发布

阅读量349

点赞数

文章标签： html5 css html

本文链接：https://blog.csdn.net/jiaopangzi/article/details/104632924

版权

自己用canvas写一个简单的钟表

利用html5中的canvas标签完成一个简单的钟表

如图:

在这里插入图片描述

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;padding:0;
        }
        canvas{   
            display:block;
            margin:0 auto;
            background: #000;   
        }  
    </style>
</head>
<body>
    <canvas width="400" height="400" id='canvas'></canvas>
</body>
<script>
    var context = canvas.getContext("2d");
    console.log(Math.PI/180);
    context.translate(200,200);
    var clockRadius = 250;
    function zhong(){
        context.clearRect(-200, -200, canvas.width, canvas.height);//每一次都清空一下画布
        this.render();
        this.time();
    }
    zhong.prototype.render = function(){
        // 表的圆盘 
        
        context.beginPath();
        context.save();
        context.strokeStyle = '#fff';   
        context.lineWidth = 4;
        context.arc(0,0,150,0,2*Math.PI,false);
        context.stroke();
        context.restore(); 

        // 表的刻度
        context.beginPath();
        context.save(); 
        context.strokeStyle = '#0f0';//设置绘制的颜色
        context.lineWidth = 2; 
        for(var i = 0 ; i < 60; i++){
            context.moveTo(0,-145);
            if(i % 5 != 0){
                context.lineTo(0,-137);
            }else{
                context.lineTo(0,-130);
            }
            context.rotate(Math.PI/180*6);
        }       
        // 表盘上的数字
        
        context.stroke();//开始绘制
        context.restore();
        context.closePath();//结束路径
        context.font = '20px "宋体"';
        context.fillStyle = '#fff';
        context.textAlign = 'center';
        context.textBaseline = 'middle';
        for (var n = 1; n <= 12; n++) {
            var theta = (n - 3) * (Math.PI * 2) / 12;
            var x = clockRadius * 0.46 * Math.cos(theta);
            var y = clockRadius * 0.46 * Math.sin(theta);
            context.fillText(n, x, y);
        } 
        context.font = '700 30px "方正舒体简体"';
        context.fillStyle = '#f00';
        context.textAlign = 'center';
        context.fillText('私人订制', 0, -60);
    }
    zhong.prototype.time = function(){
        	//日期对象
            var date = new Date();  

            var second = date.getSeconds()*6;//获取秒当前的度数 

            var seconds = date.getSeconds()/60; //获取当前秒 == 多少分钟
            var minutes = (date.getMinutes()+seconds)*6;//获取当前分针的角度

            var secondss = date.getSeconds()/3600; // 获取当前秒数 == 多少小时
            var minutess = date.getMinutes()/60;  // 获取当前分钟数 == 多少小时
            var hours = (date.getHours()+minutess+secondss)*30;

            //秒针
            context.save();
            //样式
            context.beginPath();
            context.lineWidth = 1;
            context.strokeStyle = '#fff';
            context.rotate(second*Math.PI/180);
           context.moveTo(0, 0);
           context.lineTo(0, -95);
           context.stroke();
           context.restore();

            //分针
            context.save();
            //样式
           context.lineWidth = 2;
           context.strokeStyle = '#fff'
           context.lineCap = "round";
           context.rotate(minutes*Math.PI/180);
            //图形的绘制
           context.moveTo(0, 0);
           context.lineTo(0, -75);
           context.stroke();
           context.restore();

            //时针
           context.save();
            //样式
           context.lineWidth = 3;
           context.strokeStyle = '#fff'
           context.lineCap = "round";
           context.rotate(hours*Math.PI/180);
            //图形的绘制
           context.moveTo(0, 0);
           context.lineTo(0, -55);
           context.stroke();
           context.restore();
           context.closePath();
        
        //    表心
        context.save();
        context.beginPath();
        context.fillStyle = '#f00';   
        context.arc(0,0,4,0,2*Math.PI,false);
        context.fill();
        context.restore();
        context.closePath();   

    }
    new zhong();
    setInterval(function(){
        new zhong();
    },10)
</script>
</html>

jiaopangzi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用canvas完成钟表的绘制

自己用canvas写一个简单的钟表利用html5中的canvas标签完成一个简单的钟表如图: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
复制链接

扫一扫