简单的canvas时钟
<!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时钟的更多相关文章
- 制作简单的WPF时钟
原文:制作简单的WPF时钟 在很早之前,我曾经写过一个GDI+的时钟,见"C#时钟控件 (C# Clock Control)" http://blog.csdn.net/johns ...
- js简单 图片版时钟，带翻转效果
js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- Coffeescript实现canvas时钟
前言 参照Mozilla 官方教程,要在Canvas上画动画时钟,思路非常有意思. 把动画看作是多个帧组成,定时每个时间点在Canvas上画一帧来实现动画.而Mozilla 官方教程画图实现的思路有意 ...
- 》》canvas时钟
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 原生js之canvas时钟组件
canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素,比如压缩上传的图片.比如刮刮卡.比如制作海报.图表插件等,很多人在面试的过程中也会被问到有没有接触过canvas图形绘制. 定义 ca ...
- 炒鸡简单的canvas粒子（山东数漫江湖）
位图的canvas一直不会被svg比下去的原因了. 俗话说,须弥芥子,是大小之说,也有以小见大之说,颗颗粒子,足以构建宏大效果. 这是一篇炒鸡简单的canvas粒子教程,主要是讲如何粒子特效的原理,一 ...
- JS — 实现简单的数字时钟
js实现简单的数字时钟 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- 简单入门canvas - 通过刮奖效果来学习
一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
- HTML5之Canvas时钟(网页效果--每日一更)
今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...
随机推荐
- Unity和Android互相调用
安卓部分代码: public class GameMainActivity extends UnityPlayerActivity { private static String CODE_ROOT ...
- HDU 5053 the Sum of Cube（简单数论）
http://acm.hdu.edu.cn/showproblem.php?pid=5053 题目大意: 求出A^3+(A+1)^3+(A+2)^3+...+B^3和是多少 解题思路: 设f(n)=1 ...
- Android--带你一点点封装项目 MVP+BaseActivity+Retrofit+Dagger+RxJava（一）
1,其实早就想把这些东西给封装封装的,一直没有时间,今天刚好项目进入到测试阶段了,Bug同事在哪儿测试的飞起,但发现提bug的尽然是我(得意脸),然后上午把ios的包测试了一下,顺便把服务器给测挂了( ...
- JAVA基本类库介绍
我们曾经讲过,Java已经为编程者编制了许多类,这些类已经经过测试,基本上不存在错误,这些类都是我们编程的基础.如果不利用这些已存在的类,我们的 编程工作将变得异常复杂,所以我们应尽可能多的掌握Jav ...
- 谁也无法挡住我访问Google---使用Nginx反向代理攻略
展示最终成果: 浏览器打开 http://www.manda13.com/(慢搭搜索)这个是自己搭建的百度网盘搜索,欢迎测试 点击右上角“原版Google”,就可以访问Google. 是不是很方便. ...
- select/poll/epoll on serial port
In this article, I will use three asynchronous conferencing--select, poll and epoll on serial port t ...
- docker 介绍
docker 介绍 安装 sudo apt-get install docker.io sudo docker info 查看是否安装成功 hello world sodu docker run he ...
- 3173: [Tjoi2013]最长上升子序列
原题:http://www.lydsy.com/JudgeOnline/problem.php?id=3173 题解:促使我写这题的动力是,为什么百度遍地是Treap,黑人问号??? 这题可以用线段树 ...
- Unable to make the session state request to the session state server处理
Server Error in '/' Application. Unable to make the session state request to the session state serve ...
- Linux下取代top的进程管理工具 htop
一.htop 简介 This is htop, an interactive process viewer for Linux. It is a text-mode application (for ...