HTML5之Canvas时钟(网页效果--每日一更)
今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果。
话不多说,先看效果:亲,请点击这里
众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由JavaScript控制的即时模式位图区域。即时模式是指在画布上呈现像素的方式,
HTML5 Canvas通过JavaScript调用CanvasAPI,在每一帧完全重绘屏幕上的位图。详细将在下面代码进行说明。
HTML结构代码:
<canvas id="canvas" width="500" height="500">
您的浏览器不支持Canavas标签,请升级浏览器再查看此页面!
</canvas>
CSS样式代码:
<style type="text/css">
*{margin:0px;padding:0px;}
.canvasbox{margin:50px auto;background:#dadada;width:500px;}
</style>
JS脚本代码:
<script type="text/javascript">
var canvas = document.getElementById("canvas");
//获取Canvas的2d上下文对象
var context = canvas.getContext("2d"); //定义一个初始化函数
function init(){
//先清除画布上的所有图像
context.clearRect(0,0,500,500); //获取系统时间
var date = new Date();
var hours = date.getHours();
//因为钟表是12小时制,所以必须对时刻度进行控制
hours = hours > 12 ? hours-12 : hours;
var minutes = date.getMinutes();
var seconds = date.getSeconds(); //开始画表盘
context.beginPath();
//在画布中心250,250点上画一个圆
context.arc(250,250,200,0,360,false);
//定义画笔的宽度
context.lineWidth = 10;
//定义画笔颜色
context.strokeStyle = "#000";
//关闭绘画路径
context.closePath();
//上色
context.stroke(); //开始画刻度
//时刻度
for(var h = 0;h < 12;h++){
//先将图像进行保存
context.save();
context.lineWidth = 8;
context.strokeStyle = "#f00";
//定义旋转中心点
context.translate(250,250);
//定义旋转角度
context.rotate(h*30*Math.PI/180);
context.beginPath();
context.moveTo(0,190);
context.lineTo(0,170);
context.closePath();
context.stroke();
//将之前的保存的图像显示,形成新的图像
context.restore();
}
//分刻度
for(var m = 0;m < 60;m++){
context.save();
context.lineWidth = 4;
context.strokeStyle = "red";
context.translate(250, 250);
context.rotate(m*6*Math.PI/180);
context.beginPath();
context.moveTo(0, 190);
context.lineTo(0, 180);
context.closePath();
context.stroke();
context.restore();
} //画时针
context.save();
context.lineWidth = 8;
context.strokeStyle = "#000";
context.translate(250,250);
context.rotate(hours*30*Math.PI/180);
context.beginPath();
context.moveTo(0,10);
context.lineTo(0,-100);
context.closePath();
context.stroke();
context.restore(); //画分针
context.save();
context.lineWidth = 4;
context.strokeStyle = "#000";
context.translate(250,250);
context.rotate(minutes*6*Math.PI/180);
context.beginPath();
context.moveTo(0,10);
context.lineTo(0,-140);
context.closePath();
context.stroke();
context.restore(); //画秒针
context.save();
context.lineWidth = 2;
context.strokeStyle = "blue";
context.translate(250,250);
context.rotate(seconds*6*Math.PI/180);
context.beginPath();
context.moveTo(0,10);
context.lineTo(0,-170);
context.closePath();
context.stroke();
context.restore();
}
//调用定时器,在每秒刷新重绘新图像
setInterval(init,1000);
</script>
其中,蕴含着一个小BUG。在绘画时刻度和分刻度时,若颜色不一时,会出现重叠现象,因为在绘画时刻度后,再进行绘画分刻度,故小编将两刻度颜色设置为一致,避免该现象产生。当然,也可以通过判断去进行处理,小编就不在此进行处理。
在浏览该效果时,请使用支持HTML5的浏览器,以免影响浏览效果。
享受代码,享受生活,网页效果,每日一更。
HTML5之Canvas时钟(网页效果--每日一更)的更多相关文章
- CSS3之图片3D翻转效果(网页效果--每日一更)
今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:亲,请点击这里 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animatio ...
- CSS3之绽放的花朵(网页效果--每日一更)
今天,带来的是纯CSS3打造的效果--绽放的花朵. 先来看效果吧:亲,请点击这里 这是纯CSS3样式打造的效果,关键是采用了animation属性和transform属性.详细请看下面代码. HTML ...
- JQuery图片轮播滚动效果(网页效果--每日一更)
今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:亲,请点击这里 原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的 ...
- 【HTML5】Canvas 实现放大镜效果
图片放大镜 效果 在线演示 源码 原理 首先选择图片的一块区域,然后将这块区域放大,然后再绘制到原先的图片上,保证两块区域的中心点一致, 如下图所示: 初始化 <canvas id=&qu ...
- 用户从手机的浏览器访问www.baidu.com,看到的可能跟桌面PC电脑,是不太一样的网页效果,会更适合移动设备使用。请简要分析一下,实现这种网页区分显示的原因及技术原理。
手机的网速问题.屏幕大小.内存.CPU等.通过不同设备的特征,实现不同的网页展现或输出效果.根据useragent.屏幕大小信息.IP.网速.css media Query等原理,实现前端或后端的特征 ...
- HTML5在canvas中绘制复杂形状附效果截图
HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...
- 基于HTML5 Canvas的网页画板实现教程
HTML5的功能非常强大,尤其是Canvas的应用更加广泛,Canvas画布上面不仅可以绘制任意的图形,而且可以实现多种多样的动画,甚至是一些交互式的应用,比如网页网版.这次我们要来看的就是一款基于H ...
- 那些不错的 [ Html5 + CSS3 + Canvas ] 效果!
apng制作工具:http://isparta.github.io/how.html apng制作文章:http://isux.tencent.com/introduction-of-apng.htm ...
- HTML5应用之时钟
利用HTML5的Canvas API可以完成我们以前意想不到的动画效果,以前我们想在网页上放置一个时钟,需要先用flash工具制作一个钟表,并写上复杂的JavaScript代码,然后载入到页面中.而H ...
随机推荐
- 初识nginx
先来一波官方站点关于nginx介绍.nginx相关历史这里不再赘述啦. nginx 是免费,开源,高性能 HTTP 服务器和反向代理服务器,也可作为IMAP/POP3代理服务器.nginx以它的高 ...
- android Activity类中的finish()、onDestory()和System.exit(0) 三者的区别
android Activity类中的finish().onDestory()和System.exit(0) 三者的区别 Activity.finish() Call this when your a ...
- Tornado中Cookie过期问题
首先,web应用程序是使用HTTP协议进行数据传输,因为HTTP协议是无状态的,所以一旦提交数据完成后,客户端和服务器端的连接就会被关闭,再次进行数据的交换就得重新建立新的连接,那么,有个问题就是服务 ...
- IosPush推送通知的实现
1. Apple推送通知的机制 上图可以分为三个阶段: 第一阶段:应用程序把要发送的消息.目的iPhone的标识打包,发给APNS. 第二阶段:APNS在自身的已注册Push服务的iPhone列表中, ...
- Linux CPAN Perl 模块安装
当我们想使用某些Perl模块的时候,很可能会遇到当前系统不存在这个模块的情况,这时我们可以通过使用CPAN来对相应的模块进行获取,下面就介绍一下CPAN的使用方法.首先,我们可以用perl -e 'u ...
- js中的定义
执行环境:执行环境定义了变量或函数有权访问的其他数据,决定了他们各自的行为,每个执行环境都有一个与之关联的 变量对象:环境中定义的所有变量和函数都保存在这个对象中.(在函数中这个变量对象叫活动对象) ...
- JS-字符串操作-替换
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...
- VS2013正确设置DLL环境变量目录的方法
VS有个比较迷惑人的选项,就是在工程>>属性中有个Executable Directories设置项, 几乎所有地球人都认为这个选项是设置exe可执行文件依赖的DLL目录用的,这无疑会方便 ...
- 友盟错误日志分析(转自:COCOACHINA shemy )
在做的项目中,用到了友盟的组件,在没有禁用错误日志上传之前,收集了一些错误日志. 有一些朋友看到了错误日志,却不知道怎么定位到程序的的代码中,实际上,这一步是非常的简单.友盟没有集成.dSYM文件 ...
- Mysql --分区表的管理与维护
改变一个表的分区方案只需使用alter table 加 partition_options 子句就可以了.和创建分区表时的create table语句很像 创建表 CREATE TABLE trb3 ...