canvas画布修改时钟：实现给定输入，跳转到指定时刻

最新推荐文章于 2021-12-19 23:50:49 发布

sinat_40957383

最新推荐文章于 2021-12-19 23:50:49 发布

阅读量252

点赞数

本篇博客是在参考博客：https://blog.csdn.net/u012468376/article/details/73350998时钟案例源代码的基础上进行修改的。

目的想实现的功能是：实现给定输入，跳转到指定时刻。（只是跳转到指定时刻，不会自动以这个时刻为起始点进行像钟表一样自己旋转）

还面临的问题：

1、当按钮按下实现第一次跳转后，再输入不同的值，钟表指针直接跳转，不再受按钮的控制！

2、输入范围没有设置范围限制，只是提醒在哪个范围内进行输入！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Canvas</title>
    <style>
        canvas {
            display:block;
            margin: 200px auto;
        }
        
        input{
            position:fixed;
            top:1cm;
            left:1cm;
        }
        
        
        p.hour{
            position:fixed;
            top:0.5cm;
            left:1cm;
        }
        input.hour{
            position:fixed;
            top:1cm;
            left:4cm;
        }
        p.minute{
            position:fixed;
            top:1.5cm;
            left:1cm;
        }
        input.minute{
            position:fixed;
            top:2cm;
            left:4cm;
        }
        p.second{
            position:fixed;
            top:2.5cm;
            left:1cm;
        }
        input.second{
            position:fixed;
            top:3cm;
            left:4cm;
        }
        input.but1{
            position:fixed;
            top:4cm;
            left:1cm;
        }
        button.but2{
            position:fixed;
            top:4cm;
            left:4cm;
        }
        p.xianshi{
            position:fixed;
            top:5cm;
            left:1cm;
        }    
    </style>
    </head>

<body>
<canvas id="solar" weight="300" height="300" ></canvas>
<p class="hour">时（0-11）:</p>
<input type="number" id="myDate1" value="00" class="hour">
<p class="minute">分（0-59）:</p>
<input type="number" id="myDate2" value="00" class="minute">
<p class="second">秒（0-59）:</p>
<input type="number" id="myDate3" value="00" class="second">

<input type = "submit" class="but1" onclick="myFunction(this)" value="试一下"></input>

<button class="but2" onclick="back(this)">返回</button>

<p class="xianshi" id="demo"></p>

<script>
    //尝试用一下表单
    /*
    <form action="myfunction()">
    时（0-11）:<input type="text" class="hour"   name="hour" value="00"><br>
    分（0-59）:<input type="text" class="minute" name="minute" value="00"><br>
    秒（0-59）:<input type="text" class="second" name="second" value="00"><br>
    <input type="submit" value="提交">
    <input type = "reset" value="重置输入" ></input>
    </form>
    */
    var flag = false;
    function myFunction(obj) {
        let h = document.getElementById("myDate1").value;
        let m = document.getElementById("myDate2").value;
        let s = document.getElementById("myDate3").value;
        document.getElementById("demo").innerHTML = h+'时'+m+'分'+s+'秒';
        window.flag = true;
        //document.getElementById("demo").innerHTML = h+'&nbsp;&nbsp;'+m+'&nbsp;&nbsp;'+s;
        
    }
    function back(obj){
        window.flag = false;
    }
    
    init();
    function init(){
        let canvas = document.querySelector("#solar");
        let ctx = canvas.getContext("2d");
        draw(ctx);
    }
    
    function draw(ctx){
        requestAnimationFrame(function step(){
            drawDial(ctx);//绘制表盘
            drawAllHands(ctx);//绘制指针（时针、分针、秒针）    
            requestAnimationFrame(step);
        });    
    }

    function drawAllHands(ctx){
        if(window.flag){
            
            var h = document.getElementById("myDate1").value;
            var m = document.getElementById("myDate2").value;
            var s = document.getElementById("myDate3").value; 
        }
        else{
            var time = new Date();
        
            var s = time.getSeconds();
            var m = time.getMinutes();
            var h = time.getHours();
            
        }
        
        /*let time = new Date();
        
        let s = time.getSeconds();
        let m = time.getMinutes();
        let h = time.getHours();*/
        
        let pi = Math.PI;
        let secondAngle = pi / 180 * 6 * s;
        let minuteAngle = pi / 180 * 6 * m + secondAngle / 60;
        let hourAngle = pi / 180 * 30 * h + minuteAngle / 12;
        
        drawHand(hourAngle, 60, 6, "red", ctx);
        drawHand(minuteAngle, 106, 4, "green", ctx);
        drawHand(secondAngle, 129, 2, "blue", ctx);
        
    }
    
    function drawHand(angle, len, width, color,ctx){
        ctx.save();
        ctx.translate(150,150);
        ctx.rotate(-Math.PI / 2 + angle);
        ctx.beginPath();
        ctx.moveTo(-4,0);
        ctx.lineTo(len,0);
        ctx.lineWidth = width;
        ctx.strokeStyle = color;
        ctx.lineCap = "round";//线条末端以圆形结束
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
        }
 
    function drawDial(ctx){
        let pi = Math.PI;
        
        ctx.clearRect(0,0,300,300);
        ctx.save();
        
        ctx.translate(150,150); //用来移动 canvas 的原点到指定的位置
        ctx.beginPath();
        ctx.arc(0,0,148,0,2*pi); //画圆弧或圆
        ctx.stroke();            
        ctx.closePath();
        
        for(let i = 0; i < 60; i++){
            ctx.save();
            ctx.rotate( -pi / 2 + i * pi / 30);//旋转坐标轴：这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。旋转的中心是坐标原点。
            ctx.beginPath();
            ctx.moveTo(100,0);
            ctx.lineTo(140,0);
            ctx.lineWidth = i % 5 ? 2 :4;
            ctx.strokeStyle= i % 5 ? "blue" : "red";
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
        }
        ctx.restore();
    }
</script>
</body>
</html>

参考博客：https://blog.csdn.net/u012468376/article/details/73350998

sinat_40957383

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas画布修改时钟：实现给定输入，跳转到指定时刻

本篇博客是在参考博客：https://blog.csdn.net/u012468376/article/details/73350998时钟案例源代码的基础上进行修改的。目的想实现的功能是：实现给定输入，跳转到指定时刻。（只是跳转到指定时刻，不会自动以这个时刻为起始点进行像钟表一样自己旋转）还面临的问题：1、当按钮按下实现第一次跳转后，再输入不同的值，钟表指针直接跳转，不再受按钮的控制...
复制链接

扫一扫