HTML5小时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
canvas{
background: #eee;
}
</style>
<script>
window.onload=function(){
var con=document.getElementById('con');
var oCanvas=con.getContext("2d");
var startX=200;
var startY=200;
var radius=100; setInterval(function(){
oCanvas.clearRect(0, 0, 400, 400);
// 阴影
oCanvas.shadowColor="#888";
oCanvas.shadowOffsetX=1;
oCanvas.shadowOffsetY=1;
oCanvas.shadowBlur=3; // 渐变
var grd=oCanvas.createRadialGradient(startX, startY,1, startX, startY,100);
grd.addColorStop(0, '#efefef');
grd.addColorStop(1, "#cecece");
oCanvas.fillStyle=grd;
oCanvas.lineWidth=5;
oCanvas.beginPath();
oCanvas.strokeStyle="#a34";
oCanvas.arc(startX, startY, radius, 0, 2*Math.PI);
oCanvas.stroke();
oCanvas.fill(); // 去掉阴影
oCanvas.shadowColor="#888";
oCanvas.shadowOffsetX=0;
oCanvas.shadowOffsetY=0;
oCanvas.shadowBlur=0; // 画刻度
dragMark();
var myDate=new Date();
var H=myDate.getHours()*30+myDate.getMinutes()/2-90;
var M=myDate.getMinutes()*6-90;
var S=myDate.getSeconds()*6-90;
// 时针
dragT("#000",4,55,H);
// 分针
dragT("#888",3,65,M);
// 秒针
dragT("#f10",2,80,S);
// 画中心点
oCanvas.beginPath();
oCanvas.fillStyle="#ccc";
oCanvas.arc(200, 200, 6, 0, 2*Math.PI);
oCanvas.fill();
}, 1000); function dragT(color,lw,radius,angle){
oCanvas.beginPath();
oCanvas.strokeStyle=color;
oCanvas.lineWidth=lw;
oCanvas.moveTo(startX, startY);
oCanvas.lineTo(startX+radius*Math.cos(angle*Math.PI/180), startY+radius*Math.sin(angle*Math.PI/180));
oCanvas.stroke();
} function dragMark(){
for(var i = 0; i < 60; i++) {
var lw=2;
var radius1=radius-5;
var angle=i*6*Math.PI/180;
oCanvas.strokeStyle="#888";
if (i%5==0) {
radius1=radius-8;
lw=3;
oCanvas.strokeStyle="#666";
};
// if(i%15==0){
// var s=(i*6-90)*Math.PI/180;
// oCanvas.fillStyle="#000"
// oCanvas.fillText(i/5, startX+(radius-15)*Math.cos(s), startY+(radius-15)*Math.sin(s));
// }
oCanvas.lineWidth=lw;
oCanvas.beginPath();
oCanvas.moveTo(startX+radius*Math.cos(angle), startY+radius*Math.sin(angle));
oCanvas.lineTo(startX+radius1*Math.cos(angle), startY+radius1*Math.sin(angle));
oCanvas.stroke();
}; }
}
</script>
</head>
<body>
<canvas width="400" height="400" id="con"></canvas>
</body>
</html>
效果图~
HTML5小时钟的更多相关文章
- 推荐10款超级有趣的HTML5小游戏
HTML5的发展速度比任何人的都想像都要更快.更加强大有效的和专业的解决方案已经被开发......甚至在游戏世界中!这里跟大家分享有10款超级趣味的HTML5游戏,希望大家能够喜欢! Kern Typ ...
- HTML5小游戏UI美化版
HTML5小游戏[是男人就下一百层]UI美化版 之前写的小游戏,要么就比较简单,要么就是比较难看,或者人物本身是不会动的. 结合了其它人的经验,研究了一下精灵运动,就写一个简单的小游戏来试一下. 介绍 ...
- 使用HTML5制作时钟
之前看到别人用HTML5制作时钟,自己也写了一个,这是很久以前写的了,没有注释,现在自己看都晕了(注释的重要性就体现在这边了),找时间加上注释,让自己和别人都比较好理解. <!DOCTYPE h ...
- 【python】实现一个python编程的小时钟!
[本实验内容] 1.GUI.PyQT5介绍2.实现此次实验效果 [一 GUI.PyQt5介绍] 1.Python简介 2.GUI介绍 几个常用的Python GUI库: (1)wxPython (2) ...
- WPF制作的小时钟
原文:WPF制作的小时钟 周末无事, 看到WEB QQ上的小时钟挺可爱的, 于是寻思着用WPF模仿着做一个. 先看下WEB QQ的图: 打开VS, 开始动工. 建立好项目后, 面对一个空荡荡的页面, ...
- js写个小时钟
原生js写个小时钟 一.代码 今天美化博客园自学的哈,分享一下 <!--标题变成时钟--> <div id="Header1_HeaderTitle">&l ...
- Python自制小时钟,并转换为exe可执行程序详解
一,简介Python写完程序,要靠命令来执行太LOW,太低调了,还不华丽了. 再说别人的电脑,都没有Python库,怎么执行,还能不能愉快的一起玩耍了. 所以哪怕只会写一个HelloWorld,也要弄 ...
- css3-手把手 transform 小时钟
学习css3ing,正在学习transfomr,突发奇想用此做个小时钟,开始吧: 准备前期工作,把时钟的表盘,时分秒针,实时时间标签 的大概样子做好,效果如图: html代码如下: <div c ...
- Html5绘制时钟
最近在对Html5比较感兴趣,就用空闲时间做一些小例子进行练习,今天绘制一个走动的时钟,具体如下图所示: 具体思路在上图已有说明,代码如下: <script type="text/ja ...
随机推荐
- C#中Strings VS. StringBuilder
string mappingHandler = String.Format(@"""[name='BTSHTTPReceiveModule',path='BTSHTTPR ...
- C#_delegate - 异步调用实例 BeginInvoke EndInvoke event
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- 图源点到各个点的最短路径(DIJ)
# -*- coding: cp936 -*- import copy MV = 0xFFFFFFFF Vertexs = {0:'v0',1:'v1',2:'v2',3:'v3',4:'v4',5: ...
- Android 自定义View修炼-自定义加载进度动画XCLoadingImageView
一.概述 本自定义View,是加载进度动画的自定义View,继承于ImageView来实现,主要实现蒙层加载进度的加载进度效果. 支持水平左右加载和垂直上下加载四个方向,同时也支持自定义蒙层进度颜色. ...
- 自定义控件(视图)1期笔记01:View 和 ViewGroup
1.View 和 ViewGroup 图解关系: 2. View 和 ViewGroup 关系和作用: (1) 关系: • 继承关系 • 组合关系 (2) 作用: • View的作用: 提供 ...
- 关于Git和SVN的对比
1.git的提交是一个DAG有向无欢图.可以看到哥哥分支之间的合并关系.SVN的提交是一条直线. 2.git的提交版本号不是一个简单递增的数字,而是一个长达40位的十六进制数字(哈希值) 但是可以适用 ...
- Java序列化接口的作用总结
一个对象有对应的一些属性,把这个对象保存在硬盘上的过程叫做”持久化”. 把堆内存中的对象的生命周期延长,存入硬盘,做持久化操作.当下次再需要这个对象的时候,我们不用new了,直接从硬盘中读取就可以了. ...
- MATLAB基础入门笔记
为了参加那个电工杯,豁出去啦,时间真的很短,但是得挑战呀..对于MATLAB编程,有一些了解,MATLAB(矩阵实验室的简称)是一种专业的计算机程序,用于工程科学的矩阵数学运算,说说它的开发环境. 任 ...
- nodejs 微信中使用file组件上传图片在某些机型上点击无反应
看下下面的代码: <form action="/" class="file_upload" method="post" enctype ...
- C#学习笔记7:多态是面向对象的三大特征(封装、继承、多态)之一
多态: 多态是面向对象的三大特征(封装.继承.多态)之一. 什么是多态? 一个对象表现出多种状态. 多态的实现方法: 1.虚方法: 2.抽象方法: 3.接口. PS:New 关键词可以隐藏父类的方法. ...