HTML5 Canvas时间效果
2024-08-30 04:53:19
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();
最新文章
- 关于DOS与cmd(windows系统)
- 【python】队列
- css中IE6fix问题
- winform 自定义控件以及委托事件的使用
- qt QSS文件伪状态
- ASP.NET中处理异常的几种方式
- 【转】安装Ubuntu 15.10后要做的事
- [018]C++ explicit构造函数
- Android Studio快捷键快速入门
- android 对象传输及parcel机制
- c语言线性表
- 【开发笔记】Spring的配置文件
- UVa 341 - Non-Stop Travel
- 函数作用域中的this问题
- mui-H5获取当前手机通讯录
- 老男孩python学习自修第五天【集合】
- npm config 删除变量
- Docker Swarm 常用命令
- JS基础——变量
- 峰Redis学习(2)Jedis 入门实例
热门文章
- WebKit 源码分析 -- loader
- 自定义JS Map 函数
- 在js中对日期的加减法
- Codeforces Round #522 Div. 1 没打记
- CentOS 用户管理useradd、usermod等
- Android Intent Action 一览表
- BZOJ1008:[HNOI2008]越狱——题解
- LOJ6388:[THUPC2018]赛艇——题解
- HDOJ(HDU).2191. 悼念512汶川大地震遇难同胞――珍惜现在,感恩生活 (DP 多重背包+二进制优化)
- ";HK";日常之冻结术