JavaScript
搜索
分类

canvas时钟效果

作者：59580 时间：2024-05-05 09:14:22　

效果如下：

canvas时钟效果

代码如下：


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas时钟</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
<script>
window.onload = function(){
var WINDOW_WIDTH = document.body.scrollWidth;
var WINDOW_HEIGHT = document.body.scrollHeight-10;
var RADIUS = 7; //球半径
var NUMBER_GAP = 10; //数字之间的间隙
var u = 0.65; //碰撞能量损耗系数
var context; //Canvas绘制上下文
var balls = []; //存储彩色的小球
const colors = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"]; //彩色小球的颜色
var currentNums = []; //屏幕显示的8个字符
var digit = [
 [
 [0, 0, 1, 1, 1, 0, 0],
 [0, 1, 1, 0, 1, 1, 0],
 [1, 1, 0, 0, 0, 1, 1],
 [1, 1, 0, 0, 0, 1, 1],
 [1, 1, 0, 0, 0, 1, 1],
 [1, 1, 0, 0, 0, 1, 1],
 [1, 1, 0, 0, 0, 1, 1],
 [1, 1, 0, 0, 0, 1, 1],
 [0, 1, 1, 0, 1, 1, 0],
 [0, 0, 1, 1, 1, 0, 0]
 ], //0
 [
 [0, 0, 0, 1, 1, 0, 0],
 [0, 1, 1, 1, 1, 0, 0],
 [0, 0, 0, 1, 1, 0, 0],
 [0, 0, 0, 1, 1, 0, 0],
 [0, 0, 0, 1, 1, 0, 0],
 [0, 0, 0, 1, 1, 0, 0],
 [0, 0, 0, 1, 1, 0, 0],
 [0, 0, 0, 1, 1, 0, 0],
 [0, 0, 0, 1, 1, 0, 0],
 [1, 1, 1, 1, 1, 1, 1]
 ], //1
 [
 [0, 1, 1, 1, 1, 1, 0],
 [1, 1, 0, 0, 0, 1, 1],
 [0, 0, 0, 0, 0, 1, 1],
 [0, 0, 0, 0, 1, 1, 0],
 [0, 0, 0, 1, 1, 0, 0],
 [0, 0, 1, 1, 0, 0, 0],
 [0, 1, 1, 0, 0, 0, 0],
 [1, 1, 0, 0, 0, 0, 0],
 [1, 1, 0, 0, 0, 1, 1],
 [1, 1, 1, 1, 1, 1, 1]
 ], //2
 [
 [1, 1, 1, 1, 1, 1, 1],
 [0, 0, 0, 0, 0, 1, 1],
 [0, 0, 0, 0, 1, 1, 0],
 [0, 0, 0, 1, 1, 0, 0],
 [0, 0, 1, 1, 1, 0, 0],
 [0, 0, 0, 0, 1, 1, 0],
 [0, 0, 0, 0, 0, 1, 1],
 [0, 0, 0, 0, 0, 1, 1],
 [1, 1, 0, 0, 0, 1, 1],
 [0, 1, 1, 1, 1, 1, 0]
 ], //3
 [
 [0, 0, 0, 0, 1, 1, 0],
 [0, 0, 0, 1, 1, 1, 0],
 [0, 0, 1, 1, 1, 1, 0],
 [0, 1, 1, 0, 1, 1, 0],
 [1, 1, 0, 0, 1, 1, 0],
 [1, 1, 1, 1, 1, 1, 1],
 [0, 0, 0, 0, 1, 1, 0],
 [0, 0, 0, 0, 1, 1, 0],
 [0, 0, 0, 0, 1, 1, 0],
 [0, 0, 0, 1, 1, 1, 1]
 ], //4
 [
 [1, 1, 1, 1, 1, 1, 1],
 [1, 1, 0, 0, 0, 0, 0],
 [1, 1, 0, 0, 0, 0, 0],
 [1, 1, 1, 1, 1, 1, 0],
 [0, 0, 0, 0, 0, 1, 1],
 [0, 0, 0, 0, 0, 1, 1],
 [0, 0, 0, 0, 0, 1, 1],
 [0, 0, 0, 0, 0, 1, 1],
 [1, 1, 0, 0, 0, 1, 1],
 [0, 1, 1, 1, 1, 1, 0]
 ], //5
 [
 [0, 0, 0, 0, 1, 1, 0],
 [0, 0, 1, 1, 0, 0, 0],
 [0, 1, 1, 0, 0, 0, 0],
 [1, 1, 0, 0, 0, 0, 0],
 [1, 1, 0, 1, 1, 1, 0],
 [1, 1, 0, 0, 0, 1, 1],
 [1, 1, 0, 0, 0, 1, 1],
 [1, 1, 0, 0, 0, 1, 1],
 [1, 1, 0, 0, 0, 1, 1],
 [0, 1, 1, 1, 1, 1, 0]
 ], //6
 [
 [1, 1, 1, 1, 1, 1, 1],
 [1, 1, 0, 0, 0, 1, 1],
 [0, 0, 0, 0, 1, 1, 0],
 [0, 0, 0, 0, 1, 1, 0],
 [0, 0, 0, 1, 1, 0, 0],
 [0, 0, 0, 1, 1, 0, 0],
 [0, 0, 1, 1, 0, 0, 0],
 [0, 0, 1, 1, 0, 0, 0],
 [0, 0, 1, 1, 0, 0, 0],
 [0, 0, 1, 1, 0, 0, 0]
 ], //7
 [
 [0, 1, 1, 1, 1, 1, 0],
 [1, 1, 0, 0, 0, 1, 1],
 [1, 1, 0, 0, 0, 1, 1],
 [1, 1, 0, 0, 0, 1, 1],
 [0, 1, 1, 1, 1, 1, 0],
 [1, 1, 0, 0, 0, 1, 1],
 [1, 1, 0, 0, 0, 1, 1],
 [1, 1, 0, 0, 0, 1, 1],
 [1, 1, 0, 0, 0, 1, 1],
 [0, 1, 1, 1, 1, 1, 0]
 ], //8
 [
 [0, 1, 1, 1, 1, 1, 0],
 [1, 1, 0, 0, 0, 1, 1],
 [1, 1, 0, 0, 0, 1, 1],
 [1, 1, 0, 0, 0, 1, 1],
 [0, 1, 1, 1, 0, 1, 1],
 [0, 0, 0, 0, 0, 1, 1],
 [0, 0, 0, 0, 0, 1, 1],
 [0, 0, 0, 0, 1, 1, 0],
 [0, 0, 0, 1, 1, 0, 0],
 [0, 1, 1, 0, 0, 0, 0]
 ], //9
 [
 [0, 0, 0, 0],
 [0, 0, 0, 0],
 [0, 1, 1, 0],
 [0, 1, 1, 0],
 [0, 0, 0, 0],
 [0, 0, 0, 0],
 [0, 1, 1, 0],
 [0, 1, 1, 0],
 [0, 0, 0, 0],
 [0, 0, 0, 0]
 ] //:
];
function drawDatetime(cxt) {
 var nums = [];
 var date = new Date();
 var hours = date.getHours();
 var num1 = Math.floor(hours / 10);
 var num2 = hours ％ 10;
 context.fillStyle = colors[(date.getSeconds()％10)];
 var offsetX = WINDOW_WIDTH/4,
 offsetY = 30;
 nums.push({
 num: num1
 });
 nums.push({
 num: num2
 });
 nums.push({
 num: 10
 }); //冒号
 var minutes = date.getMinutes();
 var num1 = Math.floor(minutes / 10);
 var num2 = minutes ％ 10;
 nums.push({
 num: num1
 });
 nums.push({
 num: num2
 });
 nums.push({
 num: 10
 }); //冒号
 var seconds = date.getSeconds();
 var num1 = Math.floor(seconds / 10);
 var num2 = seconds ％ 10;
 nums.push({
 num: num1
 });
 nums.push({
 num: num2
 });
 for(var x = 0; x < nums.length; x++) {
 nums[x].offsetX = offsetX;
 offsetX = drawSingleNumber(offsetX, offsetY, nums[x].num, cxt);
 //两个数字连一块，应该间隔一些距离
 if(x < nums.length - 1) {
 if((nums[x].num != 10) && (nums[x + 1].num != 10)) {
 offsetX += NUMBER_GAP;
 }
 }
 }
 //说明这是初始化
 if(currentNums.length == 0) {
 currentNums = nums;
 } else {
 //进行比较
 for(var index = 0; index < currentNums.length; index++) {
 if(currentNums[index].num != nums[index].num) {
 //不一样时，添加彩色小球
 addBalls(nums[index]);
 currentNums[index].num = nums[index].num;
 }
 }
 }
 renderBalls(cxt);
 updateBalls();
 return date;
}
function addBalls(item) {
 var num = item.num;
 var numMatrix = digit[num];
 for(var y = 0; y < numMatrix.length; y++) {
 for(var x = 0; x < numMatrix[y].length; x++) {
 if(numMatrix[y][x] == 1) {
 var ball = {
  offsetX: item.offsetX + RADIUS + RADIUS * 2 * x,
  offsetY: 30 + RADIUS + RADIUS * 2 * y,
  color: colors[Math.floor(Math.random() * colors.length)],
  g: 1.5 + Math.random(),
  vx: Math.pow(-1, Math.ceil(Math.random() * 10)) * 4 + Math.random(),
  vy: -5
 }
 balls.push(ball);
 }
 }
 }
}
function renderBalls(cxt) {
 for(var index = 0; index < balls.length; index++) {
 cxt.beginPath();
 cxt.fillStyle = balls[index].color;
 cxt.arc(balls[index].offsetX, balls[index].offsetY, RADIUS, 0, 2 * Math.PI);
 cxt.fill();
 }
}
function updateBalls() {
 var i = 0;
 for(var index = 0; index < balls.length; index++) {
 var ball = balls[index];
 ball.offsetX += ball.vx;
 ball.offsetY += ball.vy;
 ball.vy += ball.g;
 if(ball.offsetY > (WINDOW_HEIGHT - RADIUS)) {
 ball.offsetY = WINDOW_HEIGHT - RADIUS;
 ball.vy = -ball.vy * u;
 }
 if(ball.offsetX > RADIUS && ball.offsetX < (WINDOW_WIDTH - RADIUS)) {
 balls[i] = balls[index];
 i++;
 }
 }
 //去除出边界的球
 for(; i < balls.length; i++) {
 balls.pop();
 }
}
function drawSingleNumber(offsetX, offsetY, num, cxt) {
 var numMatrix = digit[num];
 for(var y = 0; y < numMatrix.length; y++) {
 for(var x = 0; x < numMatrix[y].length; x++) {
 if(numMatrix[y][x] == 1) {
 cxt.beginPath();
 cxt.arc(offsetX + RADIUS + RADIUS * 2 * x, offsetY + RADIUS + RADIUS * 2 * y, RADIUS, 0, 2 * Math.PI);
 cxt.fill();
 }
 }
 }
 cxt.beginPath();
 offsetX += numMatrix[0].length * RADIUS * 2;
 return offsetX;
}
var canvas = document.getElementById("canvas");
canvas.width = WINDOW_WIDTH;
canvas.height = WINDOW_HEIGHT;
context = canvas.getContext("2d");
//记录当前绘制的时刻
var currentDate = new Date();
setInterval(function() {
 //清空整个Canvas，重新绘制内容
 context.clearRect(0, 0, context.canvas.width, context.canvas.height);
 drawDatetime(context);
}, 50)
}
</script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>

来源：http://www.qdfuns.com/notes/35662/8cbbf29ebe0e38bd893b22d00e873634.html

标签：canvas,时钟
0
投稿

猜你喜欢

  • Python利用PyExecJS库执行JS函数的案例分析

    2022-10-26 08:53:19

  • Django一小时写出账号密码管理系统

    2023-03-19 23:42:02

  • 使用pandas将numpy中的数组数据保存到csv文件的方法

    2023-07-17 15:27:38

  • 利用Go语言实现Raft日志同步

    2024-03-15 02:55:20

  • 分享一个可以生成各种进制格式IP的小工具实例代码

    2022-02-19 05:22:37

  • python创造虚拟环境方法总结

    2021-08-26 18:46:41

  • python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)

    2023-07-07 01:18:03

  • 详解Django之admin组件的使用和源码剖析

    2022-10-07 06:36:27

  • 利用Python实现数值积分的方法

    2023-07-11 10:16:31

  • SQL Server中字符串函数的用法详解

    2024-01-14 05:42:56

  • Oracle DECODE函数语法使用介绍

    2023-07-17 12:44:22

  • Python采集图片数据的实现示例

    2023-03-06 05:53:17

  • Matlab实现图像边缘检测

    2021-02-06 07:40:58

  • 基于golang的简单分布式延时队列服务的实现

    2024-05-08 10:44:03

  • Python使用Rich type和TinyDB构建联系人通讯录

    2023-07-13 10:33:22

  • SELECT...INTO的具体用法

    2024-01-29 02:20:43

  • 简明 Python 基础学习教程

    2023-01-05 13:02:05

  • python查看模块,对象的函数方法

    2021-07-11 19:45:10

  • 制作一个更漂亮一些的多选列表框

    2007-10-16 13:04:00

  • 详解利用Python scipy.signal.filtfilt() 实现信号滤波

    2022-09-23 21:23:03
    • asp之家 网络编程 m.aspxhome.com