教你使用html+js手绘一个时钟

最新推荐文章于 2023-10-03 00:49:46 发布

大音希声_

最新推荐文章于 2023-10-03 00:49:46 发布

阅读量1.6k

点赞数 2

本文链接：https://blog.csdn.net/qq_42339210/article/details/106405081

版权

一、先看一下实现的结果

在这里插入图片描述

二、html部分

html部分只使用了画布元素<canvas>，具体代码如下：

<body>
<canvas id="diagonal" width="200" height="200"></canvas>
</body>

三、JavaScript部分

具体的时钟的绘制，以及时钟的动态效果都是由js实现的，具体代码如下：

var canvas;
function clock()
{
    canvas = document.getElementById("diagonal");//获取画布
    canvas.width=400;//设置画布的宽
    canvas.height=400;//设置画布的高
    var ctx = canvas.getContext('2d');//获取上下文，并指明绘制环境
    if (ctx) {
        var timerId;
        var frameRate = 60;

        function canvObject() {
            this.x = 0;
            this.y = 0;
            this.rotation = 0;
            this.borderWidth = 2;
            this.borderColor = '#000000';//设置表盘的边界颜色
            this.fill = false;
            this.fillColor = '#F8F8FF';
            this.update = function () {//更新的函数
                if (!this.ctx) throw new Error('你没有指定ctx对象。');
                var ctx = this.ctx
                ctx.save();
                ctx.lineWidth = this.borderWidth;
                ctx.strokeStyle = this.borderColor;
                ctx.fillStyle = this.fillColor;
                ctx.translate(this.x, this.y);//使用translate()函数实现秒针的移动
                if (this.rotation) ctx.rotate(this.rotation * Math.PI / 180);//使用rotate()实现旋转效果
                if (this.draw) this.draw(ctx);
                if (this.fill) ctx.fill();
                ctx.stroke();//绘制表盘的轮廓
                ctx.restore();//
            }
        };

        function Line() {
        };
        Line.prototype = new canvObject();
        Line.prototype.fill = false;
        Line.prototype.start = [0, 0];
        Line.prototype.end = [5, 5];
        Line.prototype.draw = function (ctx) {
            ctx.beginPath();//新建一条路径
            ctx.moveTo.apply(ctx, this.start);
            ctx.lineTo.apply(ctx, this.end);
            ctx.closePath();//闭合路径
        };

        function Circle() {
        };
        Circle.prototype = new canvObject();
        Circle.prototype.draw = function (ctx) {
            ctx.beginPath();
            //使用arc()函数画圆
            ctx.arc(0, 0, this.radius, 0, 2 * Math.PI, true);
            ctx.closePath();
        };

        //画表盘
        var circle = new Circle();
        circle.ctx = ctx;
        circle.x = 100;
        circle.y = 100;
        circle.radius = 90;
        circle.fill = true;
        circle.borderWidth = 6;
        circle.fillColor = '#F8F8FF';//设置表盘的填充色

        //画时针
        var hour = new Line();
        hour.ctx = ctx;
        hour.x = 100;
        hour.y = 100;
        hour.borderColor = "#FF0000";
        hour.borderWidth = 10;
        hour.rotation = 0;
        hour.start = [0, 20];
        hour.end = [0, -50];
        //画分针
        var minute = new Line();
        minute.ctx = ctx;
        minute.x = 100;
        minute.y = 100;
        minute.borderColor = "#90EE90";
        minute.borderWidth = 7;
        minute.rotation = 0;
        minute.start = [0, 20];
        minute.end = [0, -70];
        //画秒针
        var seconds = new Line();
        seconds.ctx = ctx;
        seconds.x = 100;
        seconds.y = 100;
        seconds.borderColor = "#0000FF";
        seconds.borderWidth = 4;
        seconds.rotation = 0;
        seconds.start = [0, 20];
        seconds.end = [0, -90];

        //画12个小短线代表小时
        for (var i = 0, ls = [], cache; i < 12; i++) {
            cache = ls[i] = new Line();
            cache.ctx = ctx;
            cache.x = 100;
            cache.y = 100;
            cache.borderColor = "gray";
            cache.borderWidth = 2;
            cache.rotation = i * 30;
            cache.start = [0, -70];
            cache.end = [0, -80];
        }
        //画60个短线表示分钟
        for (var i = 0,ls2=[],secondsCache; i < 60; i++) {
            secondsCache =ls2[i]=new Line();
            secondsCache.ctx = ctx;
            secondsCache.x = 100;
            secondsCache.y = 100;
            secondsCache.borderColor = "gray";
            secondsCache.borderWidth = 1;
            secondsCache.rotation = i * 6;
            secondsCache.start = [0, -70];
            secondsCache.end = [0, -75];
        }

        timerId = setInterval(function () {
            // 清除画布
            ctx.clearRect(0, 0, 200, 200);
            // 填充背景色
            ctx.fillStyle = 'white';
            ctx.fillRect(0, 0, 200, 200);
            // 表盘
            circle.update();
            // 刻度
            for (var i = 0; cache = ls[i++];) cache.update();
            for(var i=0;secondsCache=ls2[i++];)secondsCache.update();
            // 时针，获取当前的hour并设置
            hour.rotation = (new Date()).getHours() * 30;
            hour.update();
            // 分针，获取当前的minute并设置
            minute.rotation = (new Date()).getMinutes() * 6;
            minute.update();
            // 秒针，获取当前的seconds并设置
            seconds.rotation = (new Date()).getSeconds() * 6;
            seconds.update();
            // 中心圆
            center.update();
        }, (1000 / frameRate) | 0);
    } else {
        alert('获取绘制环境失败');
    }
}
clock();

大音希声_

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
教你使用html+js手绘一个时钟

一、先看一下实现的结果二、html部分html部分只使用了画布元素<canvas>，具体代码如下：<body><canvas id="diagonal" width="200" height="200"></canvas></body>三、JavaScript部分具体的时钟的绘制，以及时钟的动态效果都是由js实现的，具体代码如下：var canvas;function clock(){ canvas = docume
复制链接

扫一扫