canvas绘制时钟

最新推荐文章于 2022-09-09 12:03:49 发布

书香水墨

最新推荐文章于 2022-09-09 12:03:49 发布

阅读量176

点赞数

分类专栏：前端文章标签： canvas

本文链接：https://blog.csdn.net/qq_27870421/article/details/89323770

版权

前端专栏收录该内容

178 篇文章 7 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title>A Simple Canvas Example</title>
</head>
<body>
    <!-- 通过设置width和height属性会改变canvas本身大小以及绘图大小 -->
    <!-- 通过css设置width和height只会改变canvas本身大小-->
    <canvas id="canvas" width="600" height="600">
        Canvas not supported(浏览器在不支持canvas元素时显示)
    </canvas>

<script>

    var  canvas = document.getElementById("canvas");
    var  context = canvas.getContext("2d");
    var  FONT_HEIGHT = 15;
    var  MARGIN = 35;
    var  HAND_TRUNCATION = canvas.width/25;
    var  HOUR_HAND_TRUNCATION = canvas.width/10;
    var  NUMERAL_SPACING = 20;
    var  RADIUS = canvas.width/2 - MARGIN;
    var  HAND_RADIUS = RADIUS + NUMERAL_SPACING;

    // Function-------------------------
    function drawCircle() {
        context.beginPath();
        context.arc(canvas.width/2, canvas.height/2, RADIUS, 0, Math.PI * 2, true);
        context.stroke();
    }

    function drawNumerals() {
        var numerals = [1 ,2 , 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
        var angle = 0;
        var numeralWidth = 0;

        numerals.forEach(function (numeral) {
           angle = Math.PI/6 * (numeral - 3);
           numeralWidth = context.measureText(numeral+"").width;
           context.fillText(numeral+"",
               canvas.width/2 + Math.cos(angle) * (HAND_RADIUS) - numeralWidth/2,
               canvas.height/2 + Math.sin(angle) * (HAND_RADIUS) + FONT_HEIGHT/3);
        });
    }

    function drawCenter() {
        context.beginPath();
        context.arc(canvas.width/2, canvas.height/2, 5, 0, Math.PI * 2, true);
        context.fill();
    }

    function drawHand(loc, isHour) {
        var angle = (Math.PI * 2) * (loc / 60) - Math.PI / 2,
            handRadius = isHour ? RADIUS - HAND_TRUNCATION - HOUR_HAND_TRUNCATION
                : RADIUS - HAND_TRUNCATION;
        context.moveTo(canvas.width/2 , canvas.height / 2);
        context.lineTo(canvas.width / 2 + Math.cos(angle) * handRadius,
            canvas.height / 2 + Math.sin(angle) * handRadius);
        context.stroke();
    }

    function drawHands() {
        var date = new Date;
        var hour = date.getHours();

        hour = hour > 12 ? hour - 12 : hour;

        drawHand(hour*5 + (date.getMinutes()/60)*5, true, 0.5);
        drawHand(date.getMinutes(), false, 0.5);
        drawHand(date.getSeconds(), false, 0.2);
    }

    function drawClock() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawCircle();
        drawCenter();
        drawHands();
        drawNumerals();
    }

    context.font = FONT_HEIGHT + 'px Arial';
    loop = setInterval(drawClock, 1000);

</script>
</body>
</html>

在这里插入图片描述

书香水墨

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
canvas绘制时钟

<!DOCTYPE html><html><head> <title>A Simple Canvas Example</title></head><body>  <!-- 通...
复制链接

扫一扫