canvas实现石英钟效果,实例代码

时间:2019-08-01 03:51来源:亚洲城ca88唯一官方网站
!DOCTYPE html html xmlns="; head meta http-equiv="Content-Type" content="text/html;charset=utf-8"/     title时钟/title    /head body     canvas id="clock" width="500" height="500"style="background-color:black;"你的浏览器不帮

亚洲城ca88唯一官方网站 1

<!DOCTYPE html>
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>时钟</title>   
</head>
<body>
    <canvas id="clock" width="500" height="500" style="background-color:black;">你的浏览器不帮忙canvas</canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("clock");
        var cxt = canvas.getContext("2d");

复制代码 代码如下:

        function drawClock() {
            var now = new Date();
            var sec = now.getSeconds();
            var min = now.getMinutes();
            var hour = now.getHours();
            hour > 12 ? hour - 12 : hour;
            hour = (min / 60);

<!doctype html>
<html>
    <head>
        <title>canvas dClock</title>
    </head>
    <body>
        <canvas id = "clock" width = "500px" height = "200px">
            您的浏览器太古董了,晋级吗!
        </canvas>
        <script type = "text/javascript">
            var clock = document.getElementById("clock");
            var cxt = clock.getContext("2d");

            //先清空画布
            cxt.clearRect(0, 0, canvas.width, canvas.height);

            //显示数字时钟
            function showTime(m, n) {
                cxt.clearRect(0, 0, 500, 500);

            //美眉图片作为表盘背景    
            var img = new Image();
            img.src = "tw.png";
            cxt.drawImage(img, 46, 46);
            //img.onload = function () {
            //    cxt.drawImage(img, 0, 0);
            //}

                var now = new Date;
                var hour = now.getHours();
                var min = now.getMinutes();
                var sec = now.getSeconds();
                var msec = now.getMilliseconds();
                hour = hour >= 10 ? hour : "0" hour;
                min = min >= 10 ? min : "0" min;
                sec = sec >= 10 ? sec : "0" sec;
                msec = (msec >= 10 && msec < 100) ? ("0" msec) : (msec >= 0 && msec < 10) ? ("00" msec) : msec;

            //画表盘大圆 圆心:x=250 y=250
            cxt.strokeStyle = "#00FFFF";
            cxt.lineWidth = 10;
            cxt.beginPath();
            cxt.arc(250, 250, 200, 0, 360);
            cxt.stroke();
            cxt.closePath();

                bdigital(m, n, hour);
                bdigital(m 160, n, min);
                bdigital(m 320, n, sec);
                //tdigital(m 480, n, msec);

            //时刻度
            for (var i = 0; i < 12; i ) {
                cxt.save();//保存当前景色
                cxt.lineWidth = 7;
                cxt.strokeStyle = "#FFFF00";

                //三个人数的显得
                function tdigital(x, y, num) {
                    var ge = num % 10;
                    var shi = (parseInt(num / 10)) % 10;
                    var bai = parseInt((parseInt(num / 10)) / 10) % 10;
                    digital(x, y, bai);
                    digital(x 70, y, shi);
                    digital(x 140, y, ge);
                }

                //设置原点
                cxt.translate(250, 250);
                //设置旋转角度
                cxt.rotate(30 * i * Math.PI / 180);//弧度   角度*Math.PI/180
                cxt.beginPath();
                cxt.moveTo(0, -175);
                cxt.lineTo(0, -195);
                cxt.stroke();
                cxt.closePath();
                cxt.restore();//把原本状态苏醒回来
            }

                //两位数的显示
                function bdigital(x, y, num) {
                    var ge = num % 10;
                    var shi = (parseInt(num / 10)) % 10;
                    digital(x, y, shi);
                    digital(x 70, y, ge);
                }

            //分刻度
            for (var i = 0; i < 60; i ) {
                cxt.save();
                cxt.lineWidth = 5;
                cxt.strokeStyle = "#FFFF00";
                cxt.translate(250, 250);
                cxt.rotate(i * 6 * Math.PI / 180);
                cxt.beginPath();
                cxt.moveTo(0, -185);
                cxt.lineTo(0, -195);
                cxt.stroke();
                cxt.closePath();
                cxt.restore();
            }

                //画:
                //时辰与分钟之间
                cxt.lineWidth = 5;
                cxt.strokeStyle = "#000";
                cxt.fillStyle = "#000";
                cxt.beginPath();
                cxt.arc(m 140, n 80, 3, 0, 360, false);
                cxt.fill();
                cxt.closePath();
                cxt.stroke();

           
            //以下的时针、分针、秒针均要转动,所以在此处要设置其异次元空间的职位
            //根据当下的小时数、分钟数、秒数分别安装种种针的角度就能够
            //-----------------------------时针-----------------------------
            cxt.save();
            cxt.lineWidth = 7;
            cxt.strokeStyle = "#00FFFF";
            cxt.translate(250, 250);
            cxt.rotate(hour * 30 * Math.PI / 180);//每小时旋转30度
            cxt.beginPath();
            cxt.moveTo(0, -130);
            cxt.lineTo(0, 10);
            cxt.stroke();
            cxt.closePath();
            cxt.restore();

                cxt.lineWidth = 5;
                cxt.strokeStyle = "#000";
                cxt.fillStyle = "#000";
                cxt.beginPath();
                cxt.arc(m 140, n 100, 3, 0, 360, false);
                cxt.fill();
                cxt.closePath();
                cxt.stroke();

            //-----------------------------分针-----------------------------
            cxt.save();
            cxt.lineWidth = 5;
            cxt.strokeStyle = "#FFFF00";
            cxt.translate(250, 250);
            cxt.rotate(min * 6 * Math.PI / 180);//每分钟旋转6度
            cxt.beginPath();
            cxt.moveTo(0, -150);
            cxt.lineTo(0, 10);
            cxt.stroke();
            cxt.closePath();
            cxt.restore();

                //分钟与秒之内
                cxt.lineWidth = 5;
                cxt.strokeStyle = "#000";
                cxt.fillStyle = "#000";
                cxt.beginPath();
                cxt.arc(m 300, n 80, 3, 0, 360, false);
                cxt.fill();
                cxt.closePath();
                cxt.stroke();

            //-----------------------------秒针-----------------------------
            cxt.save();
            cxt.lineWidth = 3;
            cxt.strokeStyle = "#FF0000";
            cxt.translate(250, 250);
            cxt.rotate(sec * 6 * Math.PI / 180);//每秒旋转6度
            cxt.beginPath();
            cxt.moveTo(0, -170);
            cxt.lineTo(0, 10);
            cxt.stroke();
            cxt.closePath();

                cxt.lineWidth = 5;
                cxt.strokeStyle = "#000";
                cxt.fillStyle = "#000";
                cxt.beginPath();
                cxt.arc(m 300, n 100, 3, 0, 360, false);
                cxt.fill();
                cxt.closePath();
                cxt.stroke();

            //美化表盘,画中间的小圆
            cxt.beginPath();
            cxt.arc(0, 0, 7, 0, 360);
            cxt.fillStyle = "#FFFF00";
            cxt.fill();
            cxt.strokeStyle = "#FF0000";
            cxt.stroke();
            cxt.closePath();

                //秒与纳秒之间一个.
//                cxt.lineWidth = 5;
//                cxt.strokeStyle = "#000";
//                cxt.fillStyle = "#000";
//                cxt.beginPath();
//                cxt.arc(m 460, n 100, 3, 0, 360, false);
//                cxt.fill();
//                cxt.closePath();
//                cxt.stroke();
            }

            //秒针上的小圆
            cxt.beginPath();
            cxt.arc(0, -140, 7, 0, 360);
            cxt.fillStyle = "#FFFF00";
            cxt.fill();
            cxt.stroke();
            cxt.closePath();
            cxt.restore();

            //呈现一个人数字
            function digital(x, y, num) {
                //设置风格
                cxt.lineWidth = 5;
                cxt.strokeStyle = "#000";

            //突显时间
            cxt.font = "18px 微软雅黑";
            cxt.lineWidth = 2;
            cxt.fillStyle = "#0000FF";
            hour=now.getHours();
            var str = hour > 10 ? hour : ("0" hour) ":" (min > 10 ? min : ("0" min))
            cxt.fillText(str, 225, 380);

                //a
                function a() {
                    cxt.beginPath();
                    cxt.moveTo(x, y);
                    cxt.lineTo(x 50, y);
                    cxt.closePath();
                    cxt.stroke();
                }

            //中中原人民共和国制作
            cxt.font = "12px 宋体";
            cxt.lineWidth = 1;
            cxt.fillText("Made In China", 210, 400);
        }

                //b
                function b() {
                    cxt.beginPath();
                    cxt.moveTo(x 55, y 5);
                    cxt.lineTo(x 55, y 55);
                    cxt.closePath();
                    cxt.stroke();
                }

        drawClock();
        setInterval(drawClock, 1000);
    </script>
</body>
</html>

                //c
                function c() {
                    cxt.beginPath();
                    cxt.moveTo(x 55, y 60);
                    cxt.lineTo(x 55, y 110);
                    cxt.closePath();
                    cxt.stroke();
                }

 亚洲城ca88唯一官方网站 2

                //d
                function d() {
                    cxt.beginPath();
                    cxt.moveTo(x 50, y 115);
                    cxt.lineTo(x, y 115);
                    cxt.closePath();
                    cxt.stroke();
                }

html html xmlns= head meta http-equiv=Content-Type content=text/html; charset=utf-8/ title时钟/title /head body canvas id=clock width=500 hei...

                //e
                function e() {
                    cxt.beginPath();
                    cxt.moveTo(x - 5, y 110);
                    cxt.lineTo(x - 5, y 60);
                    cxt.closePath();
                    cxt.stroke();
                }

                //f
                function f() {
                    cxt.beginPath();
                    cxt.moveTo(x - 5, y 55);
                    cxt.lineTo(x - 5, y 5);
                    cxt.closePath();
                    cxt.stroke();
                }

                //g
                function g() {
                    cxt.beginPath();
                    cxt.moveTo(x, y 57.5);
                    cxt.lineTo(x 50, y 57.5);
                    cxt.closePath();
                    cxt.stroke();
                }

                //0
                function zero() {
                    a(); b(); c(); d(); e(); f();
                }
                //1
                function one() {
                    b(); c();
                }
                //2
                function two() {
                    a(); b(); d(); e(); g();
                }
                //3
                function three() {
                    a(); b(); c(); d(); g();
                }
                //4
                function four() {
                    b(); c(); f(); g();
                }
                //5
                function five() {
                    a(); c(); d(); f(); g();
                }
                //6
                function six() {
                    a(); c(); d(); e(); f(); g();
                }
                //7
                function seven() {
                    a(); b(); c();
                }
                //8
                function eight() {
                    a(); b(); c(); d(); e(); f(); g();
                }
                //9
                function nine() {
                    a(); b(); c(); d(); f(); g();
                }

亚洲城ca88唯一官方网站,                //数字n
                function number(n) {
                    switch (n) {
                        case 0: zero(); break;
                        case 1: one(); break;
                        case 2: two(); break;
                        case 3: three(); break;
                        case 4: four(); break;
                        case 5: five(); break;
                        case 6: six(); break;
                        case 7: seven(); break;
                        case 8: eight(); break;
                        case 9: nine(); break;
                    }
                }
                number(num);
            }

            showTime(1, 45);
            setInterval("showTime(1,45)", 1000);
        </script>
    </body>
</html>

您也许感兴趣的篇章:

  • 运用css 原生js制作轻易的机械钟
  • 详解JavaScript的Date对象(制作简便电子石英钟)
  • js完结二个粗略的数字机械钟效果
  • JS实现的网页倒计时数字石英钟效果
  • 一级可爱纯js网页挂钟
  • js完结轻巧的秒表走动的机械钟特效
  • js时钟翻牌效果落到实处代码分享
  • JS 完毕倒计时数字石英钟效果【附实例代码】
  • 纯js代码制作的网页石英钟特效【附实例】
  • JS完结简易刻度时钟示例代码
  • 五步轻巧落成JavaScript HTML时钟效果
  • 原生JS完毕的总结小石英手表功效示例

编辑:亚洲城ca88唯一官方网站 本文来源:canvas实现石英钟效果,实例代码

关键词: 亚洲城ca88