简单的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 ...
随机推荐
- css常用鼠标指针形状代码
默认 default 文字/编辑 text 自动 auto 手形 pointer, hand(hand是IE专有) 可移动对象 move 不允许 not-allowed 无法释放 no-drop 等待 ...
- 从js向Action传中文参数出现乱码问题的解决方法
Action获取jsp表单中的中文参数,只要整个项目都采用UTF-8编码格式都不会出现乱码问题:但JSP中用到JS,并从JS向Action传中文参数,就会出现中文乱的现象 做项目的时候,发现A ...
- Eclipse安装svn插件的几种方式
Eclipse安装svn插件的几种方式 1.在线安装: (1).点击 Help --> Install New Software... (2).在弹出的窗口中点击add按钮,输入Name(任意) ...
- 索尼Sony ATI显卡驱动 Win7 Win8 Win8.1 视频黑屏 解决方法
索尼ATI显卡驱动 Win7 Win8 Win8.1 视频 黑屏 完美解决方法: 下载这个补丁 安装 即可 解决 ! baidu pan: http://pan.baidu.com/s/1gd ...
- UEFI Bootable USB Flash Drive - Create in Windows(WIN7 WIN8)
How to Create a Bootable UEFI USB Flash Drive for Installing Windows 7, Windows 8, or Windows 8.1 In ...
- 学习笔记：MySQL操作初步
对数据库的操作:SQL语言 一:SQL:Structured Query Language,结构化查询语言! 二:DDL:Data Definition Language,数据定义语言 三:DML:D ...
- Thinkphp：有你真好
ThinkPHP是为了简化企业级应用开发和敏捷WEB应用开发而诞生的.最早诞生于2006年初,2007年元旦正式更名为ThinkPHP,并且遵循Apache2开源协议发布.ThinkPHP从诞生以来一 ...
- 安卓版App开发心得
从2016年4月到6月主要做的工作是网站的开发,而6月到现在2016年8月初,主要做的工作是Android和IOS两种App的开发,又以Android为主. 将这段时间的Android开发心得记录如下 ...
- 数据结构 B-树和B+树的应用：数据搜索和数据库索引
B-树 1 .B-树定义 B-树是一种平衡的多路查找树,它在文件系统中很有用. 定义:一棵m 阶的B-树,或者为空树,或为满足下列特性的m 叉树:⑴树中每个结点至多有m 棵子树:⑵若根结点不是叶子结点 ...
- 【转】Eclipse快捷键 10个最有用的快捷键
转载地址:http://www.open-open.com/bbs/view/1320934157953 Eclipse中10个最有用的快捷键组合 一个Eclipse骨灰级开发者总结了他认为最有用但 ...