简单的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 ...
随机推荐
- WebForm 页面传值
一.使用Querystring Querystring是一种非常简单的传值方式,其缺点就是会把要传送的值显示在浏览器的地址栏中,并且在此方法中不能够传递对象.如果你想传递一个安全性不是那么太重要或者是 ...
- 显示textarea内容的时候没有自动换行
显示textarea内容的时候没有自动换行,网上找了好久,在一个论坛里找到解决方法: 1.把从数据库读出来的内容存放在一个Div内,例如: <div class="new-commen ...
- Android 自定义 view（三）—— onDraw 方法理解
前言: 上一篇已经介绍了用自己定义的属性怎么简单定义一个view<Android 自定义view(二) -- attr 使用>,那么接下来我们继续深究自定义view,下一步将要去简单理解自 ...
- SQL语句大全（转载）
经典SQL语句大全 一.基础 1.说明:创建数据库CREATE DATABASE database-name 2.说明:删除数据库drop database dbname3.说明:备份sql serv ...
- idea转eclipse 设置注意。
下载适合的eclipse
- sql查询指定表外键约束
//////////////////查询指定表外键约束select a.name as 约束名, object_name(b.parent_object_id) as 外键表, d.name as 外 ...
- tk画图
Page 387 of chapter 7 """ 6-23 page 343 play media files """ def odd() ...
- 使用百度地图api接口获取公交地图路线和车站
需要在页面文件中引用百度的js @*<script type="text/javascript" src="http://api.map.baidu.com/api ...
- zw.delphi不同版本程序运行速度测试
{ zw.delphi不同版本程序运行速度测试 delphi无论是开发,编译,还是运行,速度方面向来不差,笔者很少进行这种微粒度的优化,调试. 最近,因为项目需要,发现:同一个函数模块,差不多同样的代 ...
- Qt之布局管理--基本布局
Qt提供的布局类以及他们之间的继承关系QLayout-----QGirdLayout | ---QBoxLayout----QHBoxLayout | --QVBoxLayout----------- ...