canvas实现钟表实时绘制

最新推荐文章于 2024-06-04 14:00:25 发布

小勺挖泰山

最新推荐文章于 2024-06-04 14:00:25 发布

阅读量921

点赞数 1

分类专栏：前端canvas实现效果文章标签： canvas canvas实现钟表前端canvas实现钟表效果

本文链接：https://blog.csdn.net/baidu_32134295/article/details/87370818

版权

前端canvas实现效果专栏收录该内容

2 篇文章 0 订阅

订阅专栏

canvas实现钟表根据当前时间显示，效果如下图所示：【本文是参考文章https://www.cnblogs.com/zhaoliner/p/6098717.html写的】，但该文章还得稍加修改才能运行，所以直接写这篇文章，拷贝代码直接运行

代码如下：

<html>
<head>
    <title>Canvas tutorial</title>
    <style type="text/css">
    </style>
</head>
<body style="width:100%;height:300%;position: relative;margin: 0;padding: 0;">
    <canvas id="canvasLinear" width="300" height="300"></canvas>
</body>
<script type="text/javascript">

    // var canvas = document.querySelector('canvas');
    // var context = canvas.getContext('2d');
    var canvas = document.querySelector("canvas");
    var cxt = canvas.getContext("2d");
    var width = canvas.width;
    var height = canvas.height;
    var r = width/2; //半径

    function start(){
        setInterval(function(){
            //画表盘
            render();
            //画表针并实现根据当前时间实现表针转动；
            drawGuid();
            //绘制一次就要调用之前保存过的环境
            cxt.restore();
        },30/1000)
    }

    function render(){
        cxt.clearRect(0,0,width,height);
        cxt.save();
        cxt.translate(width/2,height/2);
        // 画轮廓
        cxt.beginPath();
        cxt.lineWidth = r*0.05;//轮廓圆宽度
        cxt.strokeStyle = "#333";//轮廓圆颜色
        cxt.arc(0,0,r-r*0.05,0,2*Math.PI); //圆
        cxt.stroke();
        cxt.closePath();
        // 画内圆
        cxt.beginPath();
        cxt.lineWidth = 1;
        var radi2 = r*0.85; //半径
        cxt.arc(0,0,radi2,0,2*Math.PI); //圆
        cxt.stroke();
        cxt.closePath();
        // 画刻度 使用Math.sin(deg)、Math.cos(deg)来计算圆上点的坐标
        // 每隔6度画一个点
        var hour = [6,5,4,3,2,1,12,11,10,9,8,7],i = 0;
        for(var deg = 0; deg < 360; deg = deg+6){
            var spotX = radi2*Math.sin(deg*2*Math.PI/360);
            var spotY = radi2*Math.cos(deg*2*Math.PI/360);
            var spot = r*0.02; //刻度半径
            cxt.beginPath();
            cxt.fillStyle = "#ccc";
            if(deg%30==0){
                cxt.fillStyle = "#333";
                spot = r*0.025;
                var textX =(radi2*0.85)*Math.sin(deg*2*Math.PI/360); //文字x坐标
                var textY =(radi2*0.85)*Math.cos(deg*2*Math.PI/360); //文字y坐标
                cxt.font = r*0.1 + "px Arial"; 
                cxt.textBaseline = "middle";// 文字垂直对齐方式
                cxt.textAlign = "center";   // 文字水平对齐方式
                cxt.fillText(hour[i],textX,textY);
                i++;
            }
            cxt.arc(spotX,spotY,spot,0,2*Math.PI);
            cxt.fill();
            cxt.closePath();
        }
        // 画中心
        cxt.beginPath();
        cxt.arc(0,0,r*0.05,0,2*Math.PI);
        cxt.stroke();
        cxt.closePath();
    }
   
    function drawGuid(){
        /*
            画钟表指针
        */
        var now = new Date();
        h = now.getHours();
        m =now.getMinutes();
        s = now.getSeconds();
        drawHour(h,m);
        drawMinute(m,s);
        drawSecond(s);
    }
    function drawHour(h,m){
        // 时针
        h = h + m/60;
        cxt.save();
        cxt.beginPath();
        cxt.rotate(2*Math.PI/12*h);
        cxt.lineWidth = r*0.05;
        cxt.lineCap = "round";
        cxt.moveTo(0,r*0.4*0.2);
        cxt.lineTo(0,-r*0.4*0.8);
        cxt.stroke();
        cxt.closePath();
        cxt.restore();
    }
    function drawMinute(m,s){
        // 分针
        m = m + s/60;
        cxt.save();
        cxt.beginPath();
        cxt.rotate(2*Math.PI/60*m);
        cxt.lineWidth = 3;
        cxt.lineCap = "round";
        cxt.moveTo(0,r*0.6*0.2);
        cxt.lineTo(0,-r*0.6*0.8);
        cxt.stroke();
        cxt.closePath();
        cxt.restore();
    }
    function drawSecond(s){
        // 秒针
        cxt.save();
        cxt.beginPath();
        cxt.rotate(2*Math.PI/60*s);
        cxt.strokeStyle = "#ff004f";
        cxt.lineWidth = 1;
        cxt.lineCap = "round";
        cxt.moveTo(0,r*0.8*0.2);
        cxt.lineTo(0,-r*0.8*0.8);
        cxt.stroke();
        cxt.closePath();
        cxt.restore();
    }
   
    start();

</script>
</html>

小勺挖泰山

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
canvas实现钟表实时绘制

canvas实现钟表根据当前时间显示，效果如下图所示：【本文是参考文章https://www.cnblogs.com/zhaoliner/p/6098717.html写的】，但该文章还得稍加修改才能运行，所以直接写这篇文章，拷贝代码直接运行代码如下：&lt;html&gt;&lt;head&gt; &lt;title&gt;Canvas tutorial&lt;/title...
复制链接

扫一扫

专栏目录