<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clock</title>
</head>
<body>
<canvas id="clock" width="500" height="500" style="display:block; margin:50px auto">
您的浏览器不支持canvas标签!
</canvas>
<script>
var clock = document.getElementById('clock');
var ctx = clock.getContext('2d');
function drawClock(){
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1;
var date = today.getDate();
var day = today.getDay();
var hour = today.getHours();
var minute = today.getMinutes();
var second = today.getSeconds();
hour = hour > 12 ? hour - 12 : hour; ctx.clearRect(0, 0, 500, 500); ctx.fillStyle = '#fff';
ctx.beginPath();
ctx.arc(250, 250, 205, 0, 2*Math.PI);
ctx.closePath();
ctx.fill(); ctx.strokeStyle = '#ddd';
ctx.lineWidth = 10;
ctx.beginPath();
ctx.arc(250, 250, 185, 0, 2*Math.PI);
ctx.closePath();
ctx.stroke(); ctx.strokeStyle = '#96DFF7';
ctx.lineWidth = 10;
ctx.beginPath();
ctx.arc(250, 250, 200, 0, 2*Math.PI);
ctx.closePath();
ctx.stroke(); ctx.strokeStyle = '#96DFF7';
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(250, 250, 192, 0, 2*Math.PI);
ctx.closePath();
ctx.stroke(); ctx.strokeStyle = '#09303C';
ctx.lineWidth = 5;
ctx.beginPath();
ctx.arc(250, 250, 205, 0, 2*Math.PI);
ctx.closePath();
ctx.stroke(); // 时刻度
for(var i = 0; i < 12; i++) {
ctx.save();
ctx.lineWidth = 4;
ctx.strokeStyle = '#000';
ctx.translate(250, 250);
ctx.rotate(30 * i / 180 * Math.PI);
ctx.beginPath();
ctx.moveTo(0, 180);
ctx.lineTo(0, 160);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
// 分刻度
for(var i = 0; i < 60; i++) {
if(i % 5 != 0){
ctx.save();
ctx.lineWidth = 2;
ctx.strokeStyle = '#000';
ctx.translate(250, 250);
ctx.rotate(6 * i / 180 * Math.PI);
ctx.beginPath();
ctx.moveTo(0, 175);
ctx.lineTo(0, 170);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
} // 秒针
ctx.save();
ctx.lineWidth = 2;
ctx.strokeStyle = "#f00";
ctx.beginPath();
ctx.translate(250, 250);
ctx.rotate((second * 6 + 180) / 180 * Math.PI);
ctx.moveTo(0, 0);
ctx.lineTo(0, 150);
ctx.closePath();
ctx.stroke();
ctx.restore(); // 分针
ctx.save();
ctx.lineWidth = 4;
ctx.strokeStyle = "#0ff";
ctx.beginPath();
ctx.translate(250, 250);
ctx.rotate((minute * 6 + second * 0.1 + 180) / 180 * Math.PI);
ctx.moveTo(0, 0);
ctx.lineTo(0, 130);
ctx.closePath();
ctx.stroke();
ctx.restore(); // 时针
ctx.save();
ctx.lineWidth = 6;
ctx.strokeStyle = "#000";
ctx.beginPath();
ctx.translate(250, 250);
ctx.rotate((hour * 30 + minute * 0.5 + 180) / 180 * Math.PI);
ctx.moveTo(0, 0);
ctx.lineTo(0, 90);
ctx.closePath();
ctx.stroke();
ctx.restore(); ctx.fillStyle = "#f00";
ctx.beginPath();
ctx.arc(250, 250, 10, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
ctx.fillStyle = "#000";
ctx.beginPath();
ctx.arc(250, 250, 8, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
ctx.fillStyle = "#fff";
ctx.beginPath();
ctx.arc(250, 250, 6, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill(); }
drawClock();
setInterval(drawClock,10);
</script>
</body>
</html>

简单的canvas时钟的更多相关文章

  1. 制作简单的WPF时钟

    原文:制作简单的WPF时钟 在很早之前,我曾经写过一个GDI+的时钟,见"C#时钟控件 (C# Clock Control)" http://blog.csdn.net/johns ...

  2. js简单 图片版时钟,带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  3. Coffeescript实现canvas时钟

    前言 参照Mozilla 官方教程,要在Canvas上画动画时钟,思路非常有意思. 把动画看作是多个帧组成,定时每个时间点在Canvas上画一帧来实现动画.而Mozilla 官方教程画图实现的思路有意 ...

  4. 》》canvas时钟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  5. 原生js之canvas时钟组件

    canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素,比如压缩上传的图片.比如刮刮卡.比如制作海报.图表插件等,很多人在面试的过程中也会被问到有没有接触过canvas图形绘制. 定义 ca ...

  6. 炒鸡简单的canvas粒子(山东数漫江湖)

    位图的canvas一直不会被svg比下去的原因了. 俗话说,须弥芥子,是大小之说,也有以小见大之说,颗颗粒子,足以构建宏大效果. 这是一篇炒鸡简单的canvas粒子教程,主要是讲如何粒子特效的原理,一 ...

  7. JS — 实现简单的数字时钟

    js实现简单的数字时钟 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  8. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  9. HTML5之Canvas时钟(网页效果--每日一更)

    今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...

随机推荐

  1. applicationContext.xml的基本配置文件

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  2. Unity已经学会的

    1.以MonoBehaviour为脚本的开发模式. 2.MonoBehaviour的大多数API. 3.动画系统大多数了解. 4.UI了解一些,能写UI. 5.Editor了解一些,能写Editor. ...

  3. OC之Copy语法

    转载请注明:http://www.cnblogs.com/letougaozao/p/3631105.html 概念 内存管理 NSString的copy实例 对象的copy实例 一.概念 目的:在改 ...

  4. VS2008下编译boost_1_47_0

      1,boost下载 如果不想自己编译,可下载http://boostpro.com/download/boost_1_47_setup.exe,安装后,程序会提供选项供下载已经编译好的库文件,基于 ...

  5. cocoapods导入第三方库提示RPC failed curl 18 transfer

    错误提示: error: RPC failed; curl 18 transfer closed with outstanding read data remaining fatal: The rem ...

  6. 个人博客作业-Week1

    1.五个问题 1) 团队编程中会不会因为人们意见的分歧而耽误时间,最终导致效率降低? 2)软件团队中测试的角色应该独立出来吗 3)对于团队编程,如果没有时间测试他人的新功能,因此就不添加该新功能,那会 ...

  7. 20165310 NetSec2019 Week6 Exp4 恶意代码分析

    20165310 NetSec2019 Week6 Exp4 恶意代码分析 一.实验要求 1.系统运行监控 使用如计划任务,每隔一分钟记录自己的电脑有哪些程序在联网,连接的外部IP是哪里.运行一段时间 ...

  8. HDU1024(DP)

    Max Sum Plus Plus Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  9. Android -- Handling back button press Inside Fragments

    干货(1) 首先创建一个抽象类BackHandledFragment,该类有一个抽象方法onBackPressed(),所有BackHandledFragment的子类在onBackPressed方法 ...

  10. Tensorflow CNN入门

    一.概论 以图像识别来举例,比如我们让计算机如何识别一张猫的图片识别出猫呢? 老式的计算机视觉是如何做的呢? 比如OpenCV: 首先理解很多算法,比如如何检测线条(Edge Detection) 如 ...