clock-canvas

最新推荐文章于 2021-09-29 14:51:09 发布
最新推荐文章于 2021-09-29 14:51:09 发布
阅读量287 收藏
点赞数
分类专栏： 动画 定时器 canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/power8988/article/details/78319503
版权
动画 同时被 3 个专栏收录
10 篇文章 0 订阅
订阅专栏
canvas
8 篇文章 0 订阅
订阅专栏
定时器
5 篇文章 0 订阅
订阅专栏

先列出效果图吧；
这里写图片描述

基本布局：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            text-align: center;
            margin-top: 250px;
        }
    </style>
</head>
<body>
<div>
    <canvas id="clock" height="200px" width="200px"></canvas>
</div>
</body>
</html>

js代码

<script>
    var dom = document.getElementById("clock");
    var ctx = dom.getContext("2d");
    //    获取圆的宽高和半径
    var width = ctx.canvas.width,
            height = ctx.canvas.height,
            r = width / 2;
    var rem=width/200;
    //    画背景
    function drawBackground() {
        ctx.save();
        //将画布中心调用到圆心
        ctx.translate(r, r);
//        起始一条路径
        ctx.beginPath();
//        设置线条的宽度
        ctx.lineWidth = 10*rem;
//          画圆
        ctx.arc(0, 0, r - ctx.lineWidth / 2, 0, 2 * Math.PI, false);
        //画
        ctx.stroke();
//        设置小时整点的数字
        var hoursNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
//        设置填充文本的样式
        ctx.font = 18*rem+"px Arial";
        ctx.textAlign = "center";
        ctx.baseline = "middle";
        hoursNumbers.forEach(function (number, i) {
            var rad = 2 * Math.PI / 12 * i;
            var x = Math.cos(rad) * (r - 30*rem);
            var y = Math.sin(rad) * (r - 30*rem);

            ctx.fillText(number, x, y);
        })
//        秒针
        for (var i = 0; i < 60; i++) {
            var rad = 2 * Math.PI / 60 * i;
            var x = Math.cos(rad) * (r - 18*rem);
            var y = Math.sin(rad) * (r - 18*rem);
            ctx.beginPath();
            if (i % 5 === 0) {
                ctx.fillStyle = "#000";
                ctx.arc(x, y, 2*rem, 0, 2 * Math.PI, false);
            } else {
                ctx.fillStyle = "#ccc";
                ctx.arc(x, y, 1*rem, 0, 2 * Math.PI, false);
            }

            ctx.fill();
        }
    }
    //   写画出时针的方法
    function drawHour(hour, minute) {
        ctx.save();
        ctx.beginPath();
        var rad = 2 * Math.PI / 12 * hour;
        var mrad = 2 * Math.PI / 12 / 60 * minute;
        ctx.rotate(rad + mrad);
        ctx.lineWidth = 6*rem;
        ctx.lineCap = "round";
        ctx.moveTo(0, 10*rem);
        ctx.lineTo(0, -r / 2);
        ctx.stroke();
        ctx.restore();
    }
    //写画分针的方法
    function drawMinute(minute) {
        ctx.save();
        ctx.beginPath();
        var rad = 2 * Math.PI / 60 * minute;
        ctx.rotate(rad);
        ctx.lineWidth = 3*rem;
        ctx.lineCap = "round";
        ctx.moveTo(0, 10*rem);
        ctx.lineTo(0, -r + 18*rem);
        ctx.stroke();
        ctx.restore();
    }
    //写画秒针的方法
    function drawSeconds(second) {
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle = "#c14543";
        var rad = 2 * Math.PI / 60 * second;
        ctx.rotate(rad);
        ctx.moveTo(-2*rem, 20*rem);
        ctx.lineTo(2*rem, 20*rem);
        ctx.lineTo(1, -r + 18*rem);
        ctx.lineTo(-1, -r + 18*rem);
        ctx.fill();
        ctx.restore();
    }
    //    定义画圆心的按钮
    function drawDot() {
        ctx.beginPath();
        ctx.fillStyle = "#fff";
        ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);
        ctx.fill();
    }

    //开始绘制一个时钟
    function draw() {
        ctx.clearRect(0,0,width,height);
//        获取
        var now=new Date();
        var hour=now.getHours();
        var minute=now.getMinutes();
        var seconds=now.getSeconds();
        //调用画背景的方法
        drawBackground();
//    调用画时针的方法
        drawHour(hour, minute);
//    调用时针的方法
        drawMinute(minute);
//    调用画秒针的方法
        drawSeconds(seconds);
//    调用画圆心按钮的方法
        drawDot();
        ctx.restore();
    }
    setInterval(draw, 1000)
</script>
  • 完整代码：
 <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            text-align: center;
            margin-top: 250px;
        }
    </style>
</head>
<body>

<div>
    <canvas id="clock" height="200px" width="200px"></canvas>
</div>
<script>
    var dom = document.getElementById("clock");
    var ctx = dom.getContext("2d");
    //    获取圆的宽高和半径
    var width = ctx.canvas.width,
            height = ctx.canvas.height,
            r = width / 2;
    var rem=width/200;
    //    画背景
    function drawBackground() {
        ctx.save();
        //将画布中心调用到圆心
        ctx.translate(r, r);
//        起始一条路径
        ctx.beginPath();
//        设置线条的宽度
        ctx.lineWidth = 10*rem;
//          画圆
        ctx.arc(0, 0, r - ctx.lineWidth / 2, 0, 2 * Math.PI, false);
        //画
        ctx.stroke();
//        设置小时整点的数字
        var hoursNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
//        设置填充文本的样式
        ctx.font = 18*rem+"px Arial";
        ctx.textAlign = "center";
        ctx.baseline = "middle";
        hoursNumbers.forEach(function (number, i) {
            var rad = 2 * Math.PI / 12 * i;
            var x = Math.cos(rad) * (r - 30*rem);
            var y = Math.sin(rad) * (r - 30*rem);

            ctx.fillText(number, x, y);
        })
//        秒针
        for (var i = 0; i < 60; i++) {
            var rad = 2 * Math.PI / 60 * i;
            var x = Math.cos(rad) * (r - 18*rem);
            var y = Math.sin(rad) * (r - 18*rem);
            ctx.beginPath();
            if (i % 5 === 0) {
                ctx.fillStyle = "#000";
                ctx.arc(x, y, 2*rem, 0, 2 * Math.PI, false);
            } else {
                ctx.fillStyle = "#ccc";
                ctx.arc(x, y, 1*rem, 0, 2 * Math.PI, false);
            }

            ctx.fill();
        }
    }
    //   写画出时针的方法
    function drawHour(hour, minute) {
        ctx.save();
        ctx.beginPath();
        var rad = 2 * Math.PI / 12 * hour;
        var mrad = 2 * Math.PI / 12 / 60 * minute;
        ctx.rotate(rad + mrad);
        ctx.lineWidth = 6*rem;
        ctx.lineCap = "round";
        ctx.moveTo(0, 10*rem);
        ctx.lineTo(0, -r / 2);
        ctx.stroke();
        ctx.restore();
    }
    //写画分针的方法
    function drawMinute(minute) {
        ctx.save();
        ctx.beginPath();
        var rad = 2 * Math.PI / 60 * minute;
        ctx.rotate(rad);
        ctx.lineWidth = 3*rem;
        ctx.lineCap = "round";
        ctx.moveTo(0, 10*rem);
        ctx.lineTo(0, -r + 18*rem);
        ctx.stroke();
        ctx.restore();
    }
    //写画秒针的方法
    function drawSeconds(second) {
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle = "#c14543";
        var rad = 2 * Math.PI / 60 * second;
        ctx.rotate(rad);
        ctx.moveTo(-2*rem, 20*rem);
        ctx.lineTo(2*rem, 20*rem);
        ctx.lineTo(1, -r + 18*rem);
        ctx.lineTo(-1, -r + 18*rem);
        ctx.fill();
        ctx.restore();
    }
    //    定义画圆心的按钮
    function drawDot() {
        ctx.beginPath();
        ctx.fillStyle = "#fff";
        ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);
        ctx.fill();
    }

    //开始绘制一个时钟
    function draw() {
        ctx.clearRect(0,0,width,height);
//        获取
        var now=new Date();
        var hour=now.getHours();
        var minute=now.getMinutes();
        var seconds=now.getSeconds();
        //调用画背景的方法
        drawBackground();
//    调用画时针的方法
        drawHour(hour, minute);
//    调用时针的方法
        drawMinute(minute);
//    调用画秒针的方法
        drawSeconds(seconds);
//    调用画圆心按钮的方法
        drawDot();
        ctx.restore();
    }
    setInterval(draw, 1000)
</script>
</body>
</html>
liugang0605
关注
专栏目录
简洁易用的jQuery.clock-canvas基于canvas实现的时钟效果
06-12
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 24.0px; font: 12.0px 'Heiti SC Light'; color: #323333} span.s1 {font-kerning: none} 效果描述： 一个非常不错的好用的时钟动画效果 基于canvas实现的效果，可以实时模拟当前时间   使用方法： 1、将body中的代码部分拷贝过去即可
html5 canvas clock 时钟效果
军魂L
09-26 825
这是一款仿时钟的canvas~
canvas标签clock(时钟)案例
大数据-攻城狮
12-08 605
您的浏览器不支持canvas标签，无法看到时钟
H5-Canvas-Clock-时钟
风起叶落，若是不知，岂会心动！
03-28 3437
Canvas 示例：时钟先来看下最终效果图：星期天趁空隙实现了个简单的一个时钟，下面回顾下其实现原理，和遇到的问题，对 H5 这块还是个菜鸟，只有不断通过练习去熟悉了。设计凡是从构思开始，而不是盲目的去实现代码。设计图：从上图中该时钟分为几个部分 画布，背景蓝色部分； 第一个圆：时钟边框，最外层 8 个像素的宽边框； 第二个圆：点圆圈，代表着时间划分，每两个点之间代表 12 分钟（60 / 5 =
canvas绘制时钟
qq_40710974的博客
09-29 1039
大部分的内容都是参考这里的,但是我做了改动并且讲的会更细一点 https://mp.weixin.qq.com/s/qhPg2TjjcFh9l5ZLUsFPSg
简洁易用的jQuery.clock-canvas基于canvas实现的时钟效果.zip
07-11
总结来说，jQuery.clock-canvas插件利用jQuery和Canvas的强大功能，提供了简洁、高效的时钟效果解决方案。通过理解其工作原理和自定义选项，我们可以轻松地在网页中添加富有动态感的时钟，提升用户体验。无论你是...
html-canvas-clock
03-14
<script src="html-canvas-clock-main.js"> ``` 接下来，我们要在`html-canvas-clock-main.js`文件中编写JavaScript代码来控制时钟的行为。主要步骤包括获取canvas元素、创建绘图上下文、定义时钟的样式和绘制...
html5-canvas-15-clock.zip
10-05
"html5-canvas-15-clock.zip"这个压缩包很可能包含了一个关于如何使用HTML5 Canvas实现数字时钟的示例项目。在这个项目中，我们将深入探讨HTML5 Canvas API以及如何利用它来构建一个实时更新的时间显示。 首先，...
Clock-crx插件
04-03
语言:English (United States) ...基于css3的简单桌面时钟参考https://cssanimation.rocks/clocks/ https://www.w3schools.com/graphics/canvas_clock.asp http://www.pagetutor.com/common/bgcolors1536.html
动态生成条形图-canvas
power8988的博客
08-07 1691
按照上篇我稍微改动了一些： 给每个矩形增加了一个颜色的属性var rec = function (x, y, w, h) { this.x = x; this.y = y; this.w = w; this.h = h; this.color=this.h > 300 ? "red" : this.h > 200 ?
数据展示-条形图-canvas
power8988的博客
08-07 998
假设后台要求实现一个条形图，而且还是动态生成，（此处暂时不考虑用户输入数值，仅考虑数据从后台生成）； 大概效果如图： 比如在500*500的框内生成；以下是基本布局，<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>trialgame</title> <style>
图片匀速淡入淡出效果（纯js）
power8988的博客
08-22 713
图片匀速淡入淡出效果如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>淡入效果</title> <style> * { margin: 0; padding: 0; } div {
popup-canvas
power8988的博客
08-05 638
之前就说要写的，今天补出来； 先看效果： 基本代码： 要实现<!doctype html> <html> <head> <style> canvas { background: yellow } </style> <meta charset="utf-8"> </head> <body onload="draw
初识createJS
power8988的博客
09-25 555
CreateJS是基于HTML5开发的一套模块化的库和工具。 基于这些库，可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。 这里我引用cdn上的链接；<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https:/
分享到动画弹出框
power8988的博客
08-21 305
以下是简单的一个小动画； 效果如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div1 { width: 100px; height: 200px;
loading-css
power8988的博客
10-19 209
效果如下： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>定时器的进度条</title> <style> .loading { width: 100%; height: 100%; positi
popup（2）
power8988的博客
07-09 201
jquery简化dom操作
贝塞尔曲线
power8988的博客
09-01 198
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>commu</title> <style> canvas { background: #aaa; } </style> </head> <body> <canvas id="
HTML5 Canvas绘制圆形时钟步骤解析
<canvas id="clock" width="400" height="400"></canvas> ``` 这个元素默认是透明的，因此需要通过CSS为其添加边框以便于观察： ```css canvas { border: 1px solid black; } ``` 2. **Canvas的尺寸和图像...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

liugang0605

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值