使用canvas绘制动态时钟

最新推荐文章于 2018-10-24 12:07:22 发布
最新推荐文章于 2018-10-24 12:07:22 发布
阅读量228 收藏
点赞数
分类专栏： 原生JS 
废话不多说，直接上代码！
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>clock</title>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
    <script>
        function clock(){
            var now = new Date();
            var ctx = document.getElementById('canvas').getContext('2d');
            ctx.save();
            ctx.clearRect(0,0,150,150);
            ctx.translate(75,75);
            ctx.scale(0.4,0.4);
            ctx.rotate(-Math.PI/2);
            ctx.strokeStyle = "black";
            ctx.fillStyle = "white";
            ctx.lineWidth = 8;
            ctx.lineCap = "round";

            // Hour marks
            ctx.save();
            for (var i=0;i<12;i++){
                ctx.beginPath();
                ctx.rotate(Math.PI/6);
                ctx.moveTo(100,0);
                ctx.lineTo(120,0);
                ctx.stroke();
            }
            ctx.restore();

            // Minute marks
            ctx.save();
            ctx.lineWidth = 5;
            for (i=0;i<60;i++){
                if (i%5!=0) {
                    ctx.beginPath();
                    ctx.moveTo(117,0);
                    ctx.lineTo(120,0);
                    ctx.stroke();
                }
                ctx.rotate(Math.PI/30);
            }
            ctx.restore();

            var sec = now.getSeconds();
            var min = now.getMinutes();
            var hr  = now.getHours();
            hr = hr>=12 ? hr-12 : hr;

            ctx.fillStyle = "black";

            // write Hours
            ctx.save();
            ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
            ctx.lineWidth = 14;
            ctx.beginPath();
            ctx.moveTo(-20,0);
            ctx.lineTo(80,0);
            ctx.stroke();
            ctx.restore();

            // write Minutes
            ctx.save();
            ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
            ctx.lineWidth = 10;
            ctx.beginPath();
            ctx.moveTo(-28,0);
            ctx.lineTo(112,0);
            ctx.stroke();
            ctx.restore();

            // Write seconds
            ctx.save();
            ctx.rotate(sec * Math.PI/30);
            ctx.strokeStyle = "#D40000";
            ctx.fillStyle = "#D40000";
            ctx.lineWidth = 6;
            ctx.beginPath();
            ctx.moveTo(-30,0);
            ctx.lineTo(83,0);
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(0,0,10,0,Math.PI*2,true);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(95,0,10,0,Math.PI*2,true);
            ctx.stroke();
            ctx.fillStyle = "rgba(0,0,0,0)";
            ctx.arc(0,0,3,0,Math.PI*2,true);
            ctx.fill();
            ctx.restore();

            ctx.beginPath();
            ctx.lineWidth = 14;
            ctx.strokeStyle = '#325FA2';
            ctx.arc(0,0,142,0,Math.PI*2,true);
            ctx.stroke();

            ctx.restore();

            window.requestAnimationFrame(clock);
        }
        
        window.requestAnimationFrame(clock);
    </script>
</html>

guxin_duyin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas画钟表源码
04-16
利用canvas实现web端钟表的展示，同时加强我们对canvas各项属性和方法的印象和运用
【Canvas】js用canvas绘制一个钟表时钟动画效果
TA远方
11-29 1446
学习JavaScript的看过来，有没有兴趣用Canvas画图呢，可以画很多有趣的事物，自由发挥想象，收获多多哦，旋转角度绘图这个重点掌握到了吗，这里有一个例子，如何用canvas画钟表时钟动图效果，接下来开始讲，边学边做。
canvas绘制精细走动时钟
小圣贤君的博客
11-16 5313
这里简单了利用canvas做了一个时钟，能够实现分针和时针较精确的走动，没有太多难点，重点的是要实现分针和时针走动，角度的计算，笔者在下面进行说明。先看效果图： 颜色单配的比较难看，读者谅解。请看代码：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>
canvas简单实现动态时钟
weixin_34309543的博客
05-25 99
使用到的知识： 1. 获取系统时间2. 画图形，空心图形，实心图形，以及一些属性 3. for循环准备工作：添加一块画布1000*1000（随意），引用canvas.js<!doctypehtml> <html> <head> <metacharset="UTF-8"> ...
使用canvas绘制风景时钟
think_you_WL的博客
12-19 1441
风景时钟 实现代码如下：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .content{ width: 600px; height: 600px; border
使用canvas绘制超炫时钟
09-28
主要介绍了使用canvas绘制超炫时钟的方法及代码，非常的漂亮，这里推荐给大家
JS+Canvas绘制动态时钟效果
10-19
主要为大家详细介绍了JS+Canvas绘制动态时钟效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用Canvas绘制风景时钟
07-06
使用 Canvas 以及日期对象等知识制作风景时钟效果
canvas绘制表盘时钟
08-31
本文主要分享了canvas绘制表盘时钟的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
使用canvas绘制的动态实时时钟.html
06-30
使用canvas绘制的实时时钟
利用canvas画出动态时钟
qq_38195578的博客
07-17 670
最近在学习html5，其中的canvas显得尤为重要，能够实现很多功能，画出很多漂亮的东西，下面记录一下我学到的第一个canvas实例：利用canvas画出时钟。
用canvas画一个钟表
weixin_34187822的博客
03-28 52
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{background:#000;} #c1{backgroun...
使用canvas绘制钟表
weixin_34206899的博客
10-16 70
2019独角兽企业重金招聘Python工程师标准>>> ...
用canvas来实现动态时钟
一个假胖子
10-24 329
之前用简单的css与js来实现动态的时钟，发现直接用canvas也可以画时钟，只不过时钟圈和指针应该要放在不同的画布canvas中比较好，因为指针所在的画布是要一直旋转的，详细代码如下（如有问题，望大家指出，一起进步哈！） &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt...
canvas动画时钟
weixin_34122604的博客
11-07 119
最近在学canvas，然后根据MDN上的例子做了个动画时钟（为什么要造个轮子，因为丑。。） 这是MDN上的例子，怎么说呢，比较复古吧。 首先，找一张时钟的图片，就是下面这张了。 ——来自bigger than bigger的dribbble网站，图片来源（侵删） 然后就开始用canvas实现这个逼格满满的时钟吧。在html代码中插入c...
使用canvas实现简单的时钟效果
JiangLittleBai的博客
01-21 1654
这次要借助canvas实现时钟效果，展示当前时间，形状为圆形。 完整实现效果截图如上 关键点 时钟效果的实现主要分为3部分 1、绘制表盘、大小刻度、1~12 等静态部分的绘制 2、展示当前时间 3、时针、分针和秒针动起来 绘制静态部分 首先得到canvas和canvas的绘图环境 var canvas=document.getElementById("canv
delphi写的时钟
太阳雨
04-04 3009
很久以前写的程序了，要整理机器，只好放到这了unit Unit1;interfaceuses  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,  Dialogs, ExtCtrls, StdCtrls;type  TForm1 = class(TForm)    Timer1: T
实现HTML5 Canvas绘制时钟
最新发布
06-01
好的，下面是一个简单的HTML5 Canvas绘制时钟的示例代码： ``` <!DOCTYPE html> <html> <head> <title>Canvas时钟</title> <style> canvas { border: 2px solid black; } </style> </head> <body> <canvas id="clock" width="200" height="200"></canvas> <script> function drawClock() { // 获取Canvas元素 var canvas = document.getElementById("clock"); var ctx = canvas.getContext("2d"); // 获取Canvas中心点坐标 var centerX = canvas.width / 2; var centerY = canvas.height / 2; // 绘制表盘 ctx.beginPath(); ctx.arc(centerX, centerY, 80, 0, 2 * Math.PI); ctx.strokeStyle = "black"; ctx.stroke(); // 绘制刻度 for (var i = 1; i <= 12; i++) { var angle = i * Math.PI / 6; var x = centerX + 60 * Math.sin(angle); var y = centerY - 60 * Math.cos(angle); ctx.beginPath(); ctx.arc(x, y, 5, 0, 2 * Math.PI); ctx.fillStyle = "black"; ctx.fill(); } // 绘制时针 var now = new Date(); var hour = now.getHours() % 12; var minute = now.getMinutes(); var second = now.getSeconds(); var hourAngle = (hour + minute / 60) * Math.PI / 6; var hourX = centerX + 40 * Math.sin(hourAngle); var hourY = centerY - 40 * Math.cos(hourAngle); ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.lineTo(hourX, hourY); ctx.strokeStyle = "black"; ctx.stroke(); // 绘制分针 var minuteAngle = minute * Math.PI / 30; var minuteX = centerX + 60 * Math.sin(minuteAngle); var minuteY = centerY - 60 * Math.cos(minuteAngle); ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.lineTo(minuteX, minuteY); ctx.strokeStyle = "black"; ctx.stroke(); // 绘制秒针 var secondAngle = second * Math.PI / 30; var secondX = centerX + 60 * Math.sin(secondAngle); var secondY = centerY - 60 * Math.cos(secondAngle); ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.lineTo(secondX, secondY); ctx.strokeStyle = "red"; ctx.stroke(); } // 每秒钟更新时钟 setInterval(drawClock, 1000); </script> </body> </html> ``` 这段代码使用Canvas绘制了一个时钟，并且每秒钟更新一次。你可以将代码复制到一个HTML文件中运行，就可以看到时钟的效果了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值