HTML5 Canvas时间效果
Canvas 时间效果:
- function clockTest() {
- var canvas = document.getElementById('canvas');
- if (!(canvas && canvas.getContext)) {
- return;
- }
- var ct = canvas.getContext('2d');
- var w = canvas.width = 500;
- var h = canvas.height = 300;
- var r1 = 95;
- var c3 = ct.createLinearGradient(0, 0, 0, h);
- c3.addColorStop(0, '#FFF');
- c3.addColorStop(0.2, '#dad9e0');
- c3.addColorStop(0.4, '#adb0b6');
- c3.addColorStop(0.6, '#8f8f99');
- c3.addColorStop(0.8, '#86878b');
- c3.addColorStop(1, '#88898e');
- var c4 = ct.createRadialGradient(w / 2, h / 2, w, w, w, w);
- c4.addColorStop(0, 'rgba(0,0,0,1)');
- c4.addColorStop(0.2, 'rgba(0,0,0,0.8)');
- c4.addColorStop(0.3, 'rgba(0,0,0,0)');
- c4.addColorStop(0, 'rgba(0,0,0,0)');
- function clock() {
- var d = new Date();
- var dH = d.getHours();
- var dM = d.getMinutes();
- var dS = d.getSeconds();
- //return;
- ct.clearRect(0, 0, w, h);
- ct.save();
- ct.beginPath();
- ct.strokeStyle = 'rgba(0,0,0,0.1)';
- ct.fillStyle = c3;
- ct.arc(w / 2, h / 2, 135, 0, Math.PI * 2, true);
- ct.closePath();
- ct.fill();
- ct.stroke();
- ct.restore();
- ct.save();
- ct.beginPath();
- ct.strokeStyle = 'rgba(0,0,0,0.1)';
- ct.fillStyle = '#E2E9F1';
- ct.arc(w / 2, h / 2, 120, 0, Math.PI * 2, true);
- ct.closePath();
- ct.fill();
- ct.stroke();
- ct.restore();
- for (var i = 0; i < 60; i++) {
- ct.save();
- ct.lineCap = 'square';
- ct.beginPath();
- if (i % 5 === 0) {
- ct.lineWidth = 5;
- ct.strokeStyle = '#333';
- } else {
- ct.lineWidth = 2;
- ct.strokeStyle = '#333';
- }
- ct.translate(w / 2, h / 2);
- ct.rotate(i * 6 * Math.PI / 180);
- ct.moveTo(0, -120);
- if (i % 5 === 0) {
- ct.lineTo(0, -105);
- } else {
- ct.lineTo(0, -110);
- }
- ct.closePath();
- ct.stroke();
- ct.restore();
- }
- ct.save();
- ct.translate(w / 2, h / 2);
- ct.fillColor = '#369';
- ct.textAlign = 'center';
- ct.textBaseline = 'middle';
- ct.font = '25px times new roman';
- ct.fillText(12, 0, -r1);
- ct.fillText(3, r1, -0);
- ct.fillText(6, 0, r1);
- ct.fillText(9, -r1, -0);
- ct.fillStyle = '#333';
- ct.font = '16px verdara';
- ct.fillText('KINGWELL', 0, 50);
- ct.restore();
- ct.save();
- ct.beginPath();
- ct.translate(w / 2, h / 2);
- ct.rotate((dH + dM / 60) * 30 * Math.PI / 180);
- ct.lineWidth = 10;
- ct.strokeStyle = '#222';
- ct.moveTo(0, 15);
- ct.lineTo(0, -70);
- ct.closePath();
- ct.stroke();
- ct.restore();
- ct.save();
- ct.beginPath();
- ct.translate(w / 2, h / 2);
- ct.rotate((dM + dS / 60) * 6 * Math.PI / 180);
- ct.lineWidth = 6;
- ct.strokeStyle = '#333';
- ct.moveTo(0, 20);
- ct.lineTo(0, -90);
- ct.closePath();
- ct.stroke();
- ct.restore();
- ct.save();
- ct.beginPath();
- ct.translate(w / 2, h / 2);
- ct.rotate(dS * 6 * Math.PI / 180);
- ct.lineWidth = 2;
- ct.strokeStyle = '#C00';
- ct.moveTo(0, 25);
- ct.lineTo(0, -100);
- ct.closePath();
- ct.stroke();
- ct.restore();
- ct.save();
- ct.beginPath();
- ct.translate(w / 2, h / 2);
- ct.arc(0, 0, 6, 0, Math.PI * 2, true);
- ct.fillStyle = '#C00';
- ct.closePath();
- ct.fill();
- ct.restore();
- setTimeout(clock, 1000);
- }
- clock();
- }
- clockTest();
HTML5 Canvas时间效果的更多相关文章
- HTML5 Canvas动画效果演示
HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...
- HTML5 Canvas动画效果实现原理
在线演示 使用HTML5画布可以帮助我们高速实现简单的动画效果.基本原理例如以下: 每隔一定时间绘制图形而且清除图形,用来模拟出一个动画过程,能够使用context.clearRect(0, 0, x ...
- HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET
HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET HTML5 Canvas动画效果演示
- 7个惊艳的HTML5 Canvas动画效果及源码
HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...
- 基于HTML5 Canvas粒子效果文字动画特效
之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的 ...
- HTML5 canvas流体力学效果
某人用Java搞了一个流体力学的演示:http://grantkot.com/MPM/Liquid.html. 下面是 HTML 5版的流体力学演示(推荐使用Chrome浏览器浏览): 效果演示 &l ...
- HTML5 Canvas 超炫酷烟花绽放动画教程
这是一个很酷的HTML5 Canvas动画,它将模拟的是我们现实生活中烟花绽放的动画特效,效果非常逼真,但是毕竟是电脑模拟,带女朋友看就算了,效果还是差了点,呵呵.这个HTML5 Canvas动画有一 ...
- html5 canvas首屏自适应背景动画循环效果代码
模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...
- HTML5 Canvas 实现的9个 Loading 效果
Sonic.js 是一个很小的 JavaScript 类,用于创建基于 HTML5 画布的加载图像.更强大的是 Sonic.js 还提供了基于现成的例子的创建工具,可以帮助你实现更多自定义的(Load ...
随机推荐
- 解决打包遇到的_mssql问题
明明上一篇还说着打包好了,这一个又出现了问题,真是让人揪心呀!错误如下: Traceback (most recent call last): File "macc.py", li ...
- ZOJ 1711 H-Sum It Up
https://vjudge.net/contest/67836#problem/H Given a specified total t and a list of n integers, find ...
- Android基础------Intent组件
1.什么是intent 同Activity一样,也是Android应用组件在Android中承担着一种指令输出的作用Intent负责对应用中一次操作的动作及动作相关的数据进行描述.Android则根据 ...
- JavaScript 语句标识符,变量周期,常见的HTML事件
语句 描述 break 用于跳出循环. catch 语句块,在 try 语句块执行出错时执行 catch 语句块. continue 跳过循环中的一个迭代. do ... while 执行一个语句块, ...
- SPD各模块总结
一.用户角色绑定节点 1.库存操作员.库存主管.验货操作员:绑定任一节点 2.采购操作员.公药操作员:只能绑定药库节点 3.退库操作员.药品申领员:绑定药库以外的节点 二.采购计划模块 1.采购计划的 ...
- US Open 2016 Contest
比较弱,只写了金组和银组,铂金组的第一题. [262144] http://www.usaco.org/index.php?page=viewproblem2&cpid=648 给一个序列,相 ...
- MySQL5.7 添加、删除用户与授权
mysql -uroot -proot 例子: 创建用户mysql> CREATE USER 'xiaoyaoji'@'%' IDENTIFIED BY 'xiaoyaoji';Query OK ...
- Widows与linux关于隐形文件和非隐形文件の对比
Widows与linux关于隐形文件和非隐形文件の对比 对于windows来说 ,它本身有一些隐藏文件,为了防止一些菜鸟不小心把电脑的主要文件删除,还有就是里面存放一些你不知道的后门. 对此我们一些同 ...
- VS 2013 with update安装失败(kb2829760)解决方案
update过程中遇到kb2829760补丁无法更新而导致vs安装失败的解决方法: 1.安装KB2829760: 2.安装KB2829760中文语言包: 3.安装VS2013 with update. ...
- ubuntu下安装golang
1.安装 sudo apt-get install golang 2.查看go的安装路径 go env 查看 GOROOT="/usr/lib/go-1.6" 3.修改环境变量 e ...