简单的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 ...
随机推荐
- python 学习笔记
>>> help(print)Help on built-in function print in module builtins: print(...) print(value, ...
- web后端 文件上传
需要Commons-fileupload和commons-io两个jar包.可搜索apache commons下载 jar复制在项目下的web->WEB-INF->lib下 复制在a ...
- 在 Windows 10 中启用 Windows Photo Viewer
本文版权归cxun所有,如有转载请注明出处与本文链接,谢谢!原文地址:http://www.cnblogs.com/cxun/p/4727323.html 不知大家在使用了Win10之后有没有这样感受 ...
- robotium教材（一）：robotium环境搭建
博客Melon麦东=原创内容 目录: 1.基于无源码apk测试工程的搭建 2.基于有源码的测试工程搭建 3.遇到的问题(各种刨坑,各种尝试,网上水货回答真的太多,希望看见此文的同学你们是幸运的) ...
- nginx,文件下载,预览,防止浏览器下载时直接打开,防止预览时直接下载文件,解决nginx谷歌浏览器不支持下载问题
公司项目逐渐增多,对效率的要求越来越高,不同项目分部不同服务器,最初想用nginx 就是为了多个项目用一个url和服务器宕机解决方案 nginx也可作为附件服务器,毕竟nginx也对静态文件支持较好, ...
- uexWeiXin插件
uexWeiXin插件 接入指引 常用功能 接入指引 Android 准备一个应包名:平台默认包名:org.zywx.wbpalmstar.widgetone.uex加上应用id AppCan平台默认 ...
- apiCloud又拍云数据库操作经验
1.在数据库表中有个relation字段,表示一对多(对应其他表的多个记录),这个字段比较奇怪,因为实际上这个字段里并未保存实际值.而是保存在对应表的字段中.但是对应表显示出来并没有这个字段.导出数据 ...
- 使用JDBC实现Oracle用户认证
两天时间写的小品,以前的J2EE环境基本使用框架.现在使用JDBC配合Oracle存储过程模拟了一下用户注册和用户认证. 一.添加必须的jar包 需要JDBC连接Oracle的包和shiro-core ...
- Struts框架2ActionError类 内部资料 请勿转载 谢谢合作
ActionError类从不独立进行错误处理,它们总是被存储在ActionErrors对象中.ActionErrors对象保存ActionError类的集合以及它们特定的属性值,我们可以使用自己定义的 ...
- HTTP 和FTP 状态信息总结（留着自己用）
HTTP 状态信息 HTTP 400 – 请求无效HTTP 401.1 – 未授权:登录失败HTTP 401.2 – 未授权:服务器配置问题导致登录失败HTTP 401.3 – ACL 禁止访问资源H ...