这是一个用HTML5做的时钟，只是一个小练习，觉得和照片比较像，拿出来分享一下。
这个时钟是自己的第一个html5动画练习，不足之处还望指点...
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>practice---clock</title>
<style type="text/css">
@font-face {
font-family:DFGirl;
src:url("./DFGirl.ttf");
src: local("DFGirl"), url("./DFGirl.ttf");
}
canvas{
border:2px solid #;
margin:px px;
}
</style>
<!--[if lt IE 9]>
<script src="excanvas.min.js" type="text/javascript"></script>
<![endif] -->
</head>
<body>
<canvas id='c'></canvas>
</body>
<script type="text/javascript">
window.onload = draw;
function draw(){
var canvas = document.getElementById('c');
//You can change the width and height
canvas.width = ;
canvas.height = ;
if(!canvas.getContext){
alert('Your browser don\'t support canvas!');
}else{
clock(canvas);
//starts here
}
function clock(canvas){
var ctx = canvas.getContext('2d');
//背景色
ctx.fillStyle = '#E6E4E5';
ctx.fillRect(0, 0, canvas.width, canvas.height);
//更改坐标系到中间
ctx.translate(canvas.width*0.5, canvas.height*0.5);
//画底部阴影
var bottom_shadow = ctx.createRadialGradient(0, , , 0, , );
bottom_shadow.addColorStop(0, 'rgba(0, 0, 0, )');
bottom_shadow.addColorStop(0.4, 'rgba(, , , )');
bottom_shadow.addColorStop(0.9, '#E6E4E5');
ctx.fillStyle = bottom_shadow;
ctx.beginPath();
ctx.arc(0, , , Math.PI*0.8, Math.PI*0.2, false);
ctx.fill();
//底部桌面
var bottom_blank = 18;
ctx.fillStyle = '#DFDFDF';
ctx.fillRect(-canvas.width*0.5, canvas.height*0.5-bottom_blank, canvas.width, bottom_blank);
//白色外框
var frame_width = 18;
var inner_radius = ;
ctx.beginPath();
ctx.strokeStyle = '#FBFAF6';
ctx.lineWidth = frame_width;
ctx.arc(0, 0, inner_radius + frame_width*0.5, 0, Math.PI*2, true);
ctx.stroke();
//黑色内线
ctx.beginPath();
ctx.strokeStyle = '#';
ctx.lineWidth = 2;
ctx.arc(0, 0, inner_radius + 2, 0, Math.PI*2, true);
ctx.stroke();
//白色内遮罩
ctx.beginPath();
ctx.arc(0, 0, inner_radius, 0, Math.PI*2, true);
ctx.clip();
setInterval(function(){time_animate(ctx);}, 0);
}
//时针函数
function get_hand_angle(h, m, s){
if(h>12)
h -= 12;
var h_angle = (h/6 + m/ + s/00) * Math.PI;
var m_angle = (m/30 + s/0) * Math.PI;
var s_angle = s/30 * Math.PI;
return {
'h' : h_angle,
'm' : m_angle,
's' : s_angle
}
}
function time_animate(ctx){
ctx.save();
ctx.clearRect(-, -, , );
var inner_radius = ;
//图案背景
ctx.beginPath();
var img = new Image();
img.src = 'point.jpg';
var bg = ctx.createPattern(img, 'repeat');
ctx.fillStyle = bg;
ctx.arc(0, 0, inner_radius, 0, Math.PI*2, true);
ctx.fill();
if(window.ActiveXObject){ //IE HACK
for(var i=-; i<; i+=70){
for(var j=-; j<; j+=70)
ctx.drawImage(img, i, j);
}
ctx.beginPath();
ctx.strokeStyle = '#eee';
ctx.lineWidth = ;
ctx.arc(0, 0, , 0, Math.PI*2, true);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = '#';
ctx.lineWidth = 2;
ctx.arc(0, 0, , 0, Math.PI*2, true);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = '#fff';
ctx.lineWidth = 17;
ctx.arc(0, 0, , 0, Math.PI*2, true);
ctx.stroke();
}
//数字
ctx.fillStyle = '#';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
var font_radius = ;
//var font_family = '華康少女文字W6'; //只有opera能用
var font_family = 'DFGirl';
for(var angle=Math.PI/6,i=1; i<13; angle += Math.PI/6, i++){
if(i%3 == 0){
font_radius = ;
ctx.font = '65px ' + font_family;
}else{
ctx.font = 'bold 30px ' + font_family;
font_radius = ;
}
//ctx.fillText(i.toString(), font_radius*Math.sin(angle)-5, -font_radius*Math.cos(angle)-4);//中文少女体微调数字位置
ctx.fillText(i.toString(), font_radius*Math.sin(angle), -font_radius*Math.cos(angle));
}
//内阴影
if(!window.ActiveXObject){ //NOT IE
ctx.translate(10, -10);
var inner_shadow = ctx.createRadialGradient(0, 0, , 0, 0, );
inner_shadow.addColorStop(0.1, 'rgba(0, 0, 0, 0)');
inner_shadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.1)');
inner_shadow.addColorStop(1, 'rgba(0, 0, 0, 0.8)');
ctx.beginPath();
ctx.fillStyle = inner_shadow;
ctx.arc(0, 0, , 0, Math.PI*2, true);
ctx.fill();
}
var now = new Date();
//显示指针
var time = get_hand_angle(now.getHours(), now.getMinutes(), now.getSeconds());
var h_width = , h_height = 7;
var m_width = , m_height = 4;
var s_width = , s_height = 2;
var outside_width = 35;
ctx.shadowOffsetX = 6;
ctx.shadowOffsetY = 3;
ctx.shadowBlur = 4;
ctx.shadowColor = '#aaa';
ctx.fillStyle = '#';
ctx.rotate(time.h);
ctx.fillRect(-h_height*0.5, -h_width+outside_width, h_height, h_width);
ctx.rotate(time.m-time.h);
ctx.fillRect(-m_height*0.5, -m_width+outside_width, m_height, m_width);
ctx.rotate(time.s-time.m);
ctx.fillRect(-s_height*0.5, -s_width+outside_width, s_height, s_width);
ctx.rotate(-time.s);
ctx.shadowColor = 'rgba(0, 0, 0, 0)';
//重画一次时针，解决阴影覆盖本身的指针
ctx.rotate(time.h);
ctx.fillRect(-h_height*0.5, -h_width+outside_width, h_height, h_width);
//中间的固定圈
ctx.beginPath();
ctx.strokeStyle = '#';
ctx.lineWidth = 4;
ctx.arc(0, 0, 6, 0, Math.PI*2, true);
ctx.stroke();
ctx.restore();
}
}
</script>
</html>
分享到：
相关推荐
画一个时钟
HTML5数字时钟是一种利用HTML5的Canvas API和JavaScript编程技术来实现的动态时钟效果。这个技术在网页设计和开发中广泛应用，为用户提供了一种实时、直观的时间展示方式，无需依赖任何外部插件或服务器端的数据更新...
使用html5中的canvas，结合javascript实现时钟效果
通过以上步骤，我们就成功地使用HTML5的Canvas API实现了时钟效果。这个时钟会随着系统时间的改变而实时更新小时、分钟和秒针的位置，从而呈现出动态的效果。这是一个很好的实例，展示了Canvas在创建交互式Web应用中...
总结一下，这个"CSS3+HTML5实现漂亮LED数字时钟"项目展示了如何结合HTML5的语义化标签和CSS3的动画特性，创建出一个交互式的网页时钟。开发者不仅需要掌握HTML和CSS的基础知识，还需要理解JavaScript的时间处理和...
html5实现时钟效果的插件，可以通过修改参数，修改样式
在HTML5中实现时钟功能主要涉及以下技术点： 1. **Canvas元素**：HTML5的Canvas是一个二维绘图区域，通过JavaScript可以在这个画布上进行图形绘制。在纯Html5时钟中，Canvas被用来动态绘制时钟的指针和数字，展示...
我们将深入探讨Canvas的基础知识、相关API以及实现时钟的具体步骤。 1. HTML5 Canvas基础 HTML5 Canvas是一个二维绘图板，通过JavaScript进行操作。它由`<canvas>`标签定义，并通过JavaScript的Canvas API进行绘图...
本项目“html+css+js实现罗盘时钟”利用这三种语言的特性，创建了一个能够实时显示当前时间的动态罗盘时钟。接下来，我们将详细探讨这个项目中涉及的关键知识点。 首先，HTML（HyperText Markup Language）作为网页...
这是一款基于html5实现的数字翻页时钟效果源码。画面上由翻页数字组成的时钟随着当前时间而做相应的翻页动作，类似记分牌翻页的动画效果。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器...
然后，根据这些时间值，JavaScript计算并更新指针的位置，从而实现时钟的动态旋转。 此外，为了使时钟具有更好的用户体验，开发者可能还应用了CSS3来增加一些视觉效果，比如渐变背景、阴影效果或者动画过渡。CSS3的...
在本案例中，我们关注的是HTML5中的Canvas元素，它是实现炫丽时钟倒计时效果的关键。 Canvas是HTML5的一个核心特性，允许通过JavaScript在网页上绘制图形。它是一个矩形区域，可以被编程来显示动态或静态的图像。...
用HTML5的画布结合JQUERY以及CSS3.0的翻转制作的时钟，可以随时和系统时间保持一致，包括随时刷新也不影响
HTML5模拟时钟是一个非常适合初学者的项目，它利用了HTML5的新特性，结合CSS3的样式和布局，实现了一个动态、实时更新的时钟效果。这个项目可以帮助开发者熟悉基本的HTML结构，理解CSS的选择器、样式应用以及动画...
在罗马时钟的实现中，HTML5主要负责构建时钟的基本结构，例如定义div元素来表示时钟的各个部分，如表盘、罗马数字、指针等。 2. CSS3样式设计 CSS3作为CSS的升级版，引入了许多新的样式规则和特效，包括动画、过渡...
在这个罗盘时钟中，Canvas被用来绘制罗盘的各个部分，包括指针、刻度等，通过JavaScript控制其运动，实现时钟的实时更新。 2. **JavaScript时间处理**: JavaScript提供了Date对象来处理时间，可以获取到当前的小时...
HTML5时钟代码是一个网页应用，它利用HTML5的特性，结合CSS3和JavaScript来创建一个实时显示时间的动态时钟。这个应用的核心是通过JavaScript获取当前系统时间，并将其更新到页面上，使得用户可以直观地看到当前的...
JavaScript是实现时钟实时更新的关键。在这个项目中，可能使用了`setInterval`函数每秒或更短的时间间隔更新时间。JavaScript可以获取当前时间，然后将小时、分钟和秒分别转换为12小时制或24小时制，并更新HTML中的...
通过JavaScript或者jQuery监听时间的更新，然后更新相应的数字元素，实现时钟的实时显示。同时，CSS3的动画和过渡效果会被应用到这些数字上，以产生翻页的视觉效果。 在提供的压缩包文件“texiao2257_1560680990”...
接下来，我们将深入探讨HTML5时钟的工作原理、涉及的技术点以及如何实现这一功能。 首先，HTML5 Canvas是一个二维绘图上下文，通过JavaScript脚本可以进行像素级别的图像操作。在HTML5时钟案例中，Canvas元素被用来...