前端（canvas）圆形网页时钟实现，源码

最新推荐文章于 2024-05-07 09:15:00 发布

Altaba

最新推荐文章于 2024-05-07 09:15:00 发布

阅读量2.0k

点赞数 3

分类专栏： HTML CSS 文章标签： JS html 前端 canvas 源码

CSS 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

欢迎来到Altaba的博客 2017年1月23日

canvas画出图案，网页时钟，不废话，源码奉上，望借鉴者多点思考，前端乐趣无穷

<!--<%--
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;
    }

    .bpddy{

    }
</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="200" height="200" STYLE="border-radius: 100px;background-color: skyblue;box-shadow:0 0 0 10px; rsla(20 0% 100% 0.1)"></canvas>
</body>
</html>

Altaba

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端（canvas）圆形网页时钟实现，源码

欢迎来到Altaba的博客 2017年1月23日canvas画出图案，网页时钟，不废话，源码奉上，望借鉴者多点思考，前端乐趣无穷 JSP Page时针 canvas {
复制链接

扫一扫