您现在的位置是:群英 > 开发技术 > web开发
如何用HTML5实现一个简易的时钟
Admin发表于 2022-05-14 15:02:08970 次浏览
在实际案例的操作过程中,我们可能会遇到“如何用HTML5实现一个简易的时钟”这样的问题,那么我们该如何处理和解决这样的情况呢?这篇小编就给大家总结了一些方法,具有一定的借鉴价值,希望对大家有所帮助,接下来就让小编带领大家一起了解看看吧。

我们先来看看最终效果:

看上去很简单的一个时钟效果,但是具体实现代码仍然包含了一些重点知识。

下面是具体的实现代码:

(提示:要特别注意fillText drawhand 的使用及其中角度的计算)

<%-- 
    Document   : 时钟
    Created on : 2016-5-19, 9:49:29
    Author     : Administrator
--%>
 
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <style>
        canvas{
            border: 1px solid black;
        }
    </style>
    <script>
        (function(){
            //cavas元素对象
            var canvas=null;
            //canvas的3d上下文
            var ctx=null;
            //cavan的尺寸
            var cw=0;
            var ch=0;
            /**
             * 页面导入时的事件处理
             */
            window.addEventListener("load",function(){
                canvas=document.getElementById("sample");
                ctx=canvas.getContext("2d");
                cw=parseInt(canvas.width);
                ch=parseInt(canvas.height);
                
                ctx.translate(cw/2, ch/2);
            
                //绘制时钟
                draw_watch();
            },false);  
 
        
            /**
             * 绘制时钟
             */
            function draw_watch(){
                //清空Canvas
                ctx.clearRect(-cw/2,-ch/2,cw,ch);
                //计算针的最大长度
                var len=Math.min(cw, ch)/2;
                //绘制刻度盘
                var tlen=len*0.85;
                ctx.font="14px 'Arial'";
                ctx.fillStyle="black";
                ctx.textAlign="center";
                ctx.textBaseLine="middle";
            
                for(var i=0; i<12; i++){
                    var tag1=Math.PI*2*(3-i)/12;
                    var tx=tlen * Math.cos(tag1);
                    var ty=-tlen * Math.sin(tag1);
                    ctx.fillText(i,tx,ty);
                }
                //获取当前的时分秒
                var d=new Date();
                var h=d.getHours();
                var m=d.getMinutes();
                var s=d.getSeconds();
                if(h >12 ){
                    h=h-12;
                }
            
                //绘制时针
                var angle1 = Math.PI * 2 *(3 - (h+ m/60))/12;
                var length1=len * 0.5;
                var width1=5;
                var color1="#000000";
                drawhand(angle1,length1,width1,color1);
            
                //绘制分针
                var angle2 = Math.PI * 2 *(15 - (m+ s/60))/60;
                var length2=len * 0.7;
                var width2=3;
                var color2="#555555";
                drawhand(angle2,length2,width2,color2);
            
                //绘制秒针
                var angle3 = Math.PI * 2 *(15 - s)/60;
                var length3=len * 0.8;
                var width3=1;
                var color3="#aa0000";
                drawhand(angle3,length3,width3,color3);
            
                //设置timer
                setTimeout(draw_watch,1000);
            }
            /**
             * 针绘制函数
             */
        
            function drawhand(angle,len,width,color){
                //计算针端的坐标
                var x=len*Math.cos(angle);
                var y=-len * Math.sin(angle);
                //绘制针
                ctx.strokeStyle=color;
                ctx.lineWidth=width;
                ctx.lineCap="round";
                ctx.beginPath();
                ctx.moveTo(0,0);
                ctx.lineTo(x,y);
                ctx.stroke();
            
            }
        })();
    </script>
    <body>
        <canvas id="sample" width="150" height="150"></canvas>
    </body>
</html>

关于“如何用HTML5实现一个简易的时钟”的内容就介绍到这,感谢各位的阅读,相信大家对如何用HTML5实现一个简易的时钟已经有了进一步的了解。大家如果还想学习更多知识,欢迎关注群英网络,小编将为大家输出更多高质量的实用文章!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

标签: 时钟
相关信息推荐
2022-07-22 17:44:58 
摘要:用python画月亮的代码是【import turtle ast t.screensize(800,600,"#483d8b") t.up() t.goto(-100,64);t.pd() t.fillcolor('#ffd700')】。
2022-05-12 11:17:50 
摘要:这篇文章主要介绍了PHP 内置WEB服务器的简单使用,帮助大家更好的理解和学习使用PHP,感兴趣的朋友可以了解下
2022-09-29 17:49:46 
摘要:Go语言有一个特殊的函数init,先于main函数执行,实现包级别的一些初始化操作。这篇文章介绍了Go中的Init函数,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
云活动
推荐内容
热门关键词
热门信息
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部