520爱心时钟动画

2024-05-30 00:58
文章标签 时钟 动画 520 爱心

本文主要是介绍520爱心时钟动画，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.Index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>于大博</title></head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript" src="./js/digit.js"></script>
<script type="text/javascript" src="./js/app.js"></script>
<div style="text-align:center;margin-top:-200px; color:red; font:normal 14px/24px 'MicroSoft YaHei';"><h2>于大博</h2><p>2021年5月20日</p>
</div>
</body>
</html>

2.digit.js

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 hovertree.com[[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]]//:
];

3.app.js 

var canvas,ctx;var hours,minutes,seconds;var hearts = [];var width;var marginTop,marginLeft;window.onload = app;function app(){init();gameloop();
}function init(){canvas = document.getElementById("canvas");ctx = canvas.getContext("2d");w = window.innerWidth;h = window.innerHeight;var d = new Date();hours = d.getHours();minutes = d.getMinutes();seconds = d.getSeconds();canvas.width = w;canvas.height = h;width = new Heart().size.width;marginTop = 150;marginLeft = (w - 63*width)/2;
}function gameloop(){requestAnimationFrame(gameloop);render();update();
}function Heart(scale){scale = scale || 0.5;this.point = [];this.size = {};this.centerPoint = {};this.init(scale);
}
Heart.prototype.init = function(scale){var xArr = [],yArr = [];for(var i=10;i<30;i+=0.2){var t = i/Math.PI,x = scale * 16 * Math.pow(Math.sin(t),3),y = -scale * (13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3 * t) - Math.cos(4*t));this.point.push({x:x,y:y});xArr.push(x);yArr.push(y);}this.getCenter(xArr,yArr);this.getSize(xArr,yArr);
}
Heart.prototype.draw = function(translateX,translateY,color){this.translateX = translateX;this.translateY = translateY;ctx.save();ctx.fillStyle =  color || "#f00";ctx.translate(translateX,translateY);ctx.beginPath();for(var i=0,len=this.point.length;i<len;i++){var point = this.point[i];if(i===0){ctx.moveTo(point.x,point.y);}else{ctx.lineTo(point.x,point.y);}}ctx.closePath();ctx.fill();ctx.restore();
}
Heart.prototype.getCenter = function(xArr,yArr){this.centerPoint = {x : getMValue(Math.min.apply(null, xArr),Math.max.apply(null, xArr)),y : getMValue(Math.min.apply(null, yArr),Math.max.apply(null, yArr))};
}
Heart.prototype.getSize = function(xArr,yArr){this.size = {width : Math.abs(Math.min.apply(null, xArr) - Math.max.apply(null, xArr)),height : Math.abs(Math.min.apply(null, yArr) - Math.max.apply(null, yArr))};
}
function getMValue(min,max){return min + (max - min) / 2;
}
function renderDigit(x,y,num){for(var i=0;i<digit[num].length;i++){for(var j=0;j<digit[num][i].length;j++){if(digit[num][i][j]===1){var heart = new Heart();var translateX = Math.abs(heart.centerPoint.x - heart.size.width/2 - (x+j*heart.size.width)),translateY = Math.abs(heart.centerPoint.y - heart.size.height/2 - (y+i*heart.size.width));heart.draw(translateX,translateY);}}}
}
function update(){var td = new Date(),nexthours = td.getHours(),nextminutes = td.getMinutes(),nextseconds = td.getSeconds();if(seconds != nextseconds){if(parseInt(nexthours/10) != parseInt(hours/10)){addBalls(marginLeft,marginTop,parseInt(hours/10));}if(parseInt(nexthours%10) != parseInt(hours%10)){addBalls(marginLeft + 9 * width,marginTop,parseInt(hours%10));}if(parseInt(nextminutes/10) != parseInt(minutes/10)){addBalls(marginLeft + 23 * width,marginTop,parseInt(minutes/10));}if(parseInt(nextminutes%10) != parseInt(minutes%10)){addBalls(marginLeft + 32 * width,marginTop,parseInt(minutes%10));}if(parseInt(nextseconds/10) != parseInt(seconds/10)){addBalls(marginLeft + 46 * width,marginTop,parseInt(seconds/10));}if(parseInt(nextseconds%10) != parseInt(seconds%10)){addBalls(marginLeft + 55 * width,marginTop,parseInt(seconds%10));}seconds = nextseconds;hours = nexthours;minutes = nextminutes;}for(var i=0;i<hearts.length;i++){var heart = hearts[i];heart.tx += heart.vx;heart.ty += heart.vy;heart.vy += heart.g;if(heart.ty>=h){hearts.splice(i,1);}}
}
function addBalls(x,y,num){for(var i=0;i<digit[num].length;i++){for(var j=0;j<digit[num][i].length;j++){	if(digit[num][i][j]===1){var heart = new Heart();var translateX = Math.abs(heart.centerPoint.x - heart.size.width/2 - (x+j*heart.size.width)),translateY = Math.abs(heart.centerPoint.y - heart.size.height/2 - (y+i*heart.size.width));hearts.push({heart : heart,tx : translateX,ty : translateY,vx : (Math.random()>0.5?1:-1) * 4,vy : -10,g : 1.5 + Math.random(),color : 'rgb(' + Math.floor(Math.random()*255) + "," + Math.floor(Math.random()*255) + ","  + Math.floor(Math.random()*255) + ")"})}}}
}
function render(){ctx.clearRect(0,0,w,h);renderDigit(marginLeft,marginTop,parseInt(hours/10));renderDigit(marginLeft + 9 * width,marginTop,parseInt(hours%10));renderDigit(marginLeft + 18 * width,marginTop,10);renderDigit(marginLeft + 23 * width,marginTop,parseInt(minutes/10));renderDigit(marginLeft + 32 * width,marginTop,parseInt(minutes%10));renderDigit(marginLeft + 41 * width,marginTop,10);renderDigit(marginLeft + 46 * width,marginTop,parseInt(seconds/10));renderDigit(marginLeft + 55 * width,marginTop,parseInt(seconds%10));for(var i=0;i<hearts.length;i++){var heart = hearts[i];heart.heart.draw(heart.tx,heart.ty,heart.color);}
}

4.效果图

这篇关于520爱心时钟动画的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1015133。

相关文章

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
第10章 中断和动态时钟显示

第10章 中断和动态时钟显示

第10章 中断和动态时钟显示 从本章开始，按照书籍的划分，第10章开始就进入保护模式（Protected Mode）部分了，感觉从这里开始难度突然就增加了。 书中介绍了为什么有中断（Interrupt）的设计，中断的几种方式：外部硬件中断、内部中断和软中断。通过中断做了一个会走的时钟和屏幕上输入字符的程序。 我自己理解中断的一些作用： 为了更好的利用处理器的性能。协同快速和慢速设备一起工作
阅读更多...
Flutter 进阶：绘制加载动画

Flutter 进阶：绘制加载动画

绘制加载动画：由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类：LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态，而 LoadingPainter 则负责绘制动画。
阅读更多...
用Unity2D制作一个人物，实现移动、跳起、人物静止和动起来时的动画：中（人物移动、跳起、静止动作）

用Unity2D制作一个人物，实现移动、跳起、人物静止和动起来时的动画：中（人物移动、跳起、静止动作）

上回我们学到创建一个地形和一个人物，今天我们实现一下人物实现移动和跳起，依次点击，我们准备创建一个C#文件 创建好我们点击进去，就会跳转到我们的Vision Studio，然后输入这些代码 using UnityEngine;public class Move : MonoBehaviour // 定义一个名为Move的类，继承自MonoBehaviour{private Rigidbo
阅读更多...
动画AnimationDrawable、转动

动画AnimationDrawable、转动

现实开发中：很多地方都用到 点击动画的特效； 本案例本人做了三个关于“动” 画 的效果； 先上图： 总体图： A: B: 1：点击图片按钮，效果是：图片闪动； 通过在xml中定义：标签：animation-list来实现点击动画的效果；  是否循环标签：oneshot ;   时间间隔标签：duration ; 要显示的图片标签：drawable ;
阅读更多...
13 transition数组的动画使用

13 transition数组的动画使用

划重点 动画：transitiontransition-group ：数组动画数组的 添加 / 删除 豆腐粉丝汤 清淡又健康 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><me
阅读更多...
12 动画transition的使用2

12 动画transition的使用2

划重点 Vue 动画：transition / transform在动画周期中执行动动画（上一篇是通过动画样式控制动画） 清蒸扇贝 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><
阅读更多...
【前端】animation动画以及利用vue制作简单的透明度改变动画，包含vue生命周期实现

【前端】animation动画以及利用vue制作简单的透明度改变动画，包含vue生命周期实现

一. 问题描述 想做一个文字透明度从1到0然后再从0到1的css动画。 二. 代码写法 2.1 animation写法 2.1.1 animation属性key 2.1.2 代码展示 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=de
阅读更多...
Android 属性动画(Property Animation)

Android 属性动画(Property Animation)

本文是学习以下三位大神之后，整理的学习笔记，彩蛋在编号6          http://blog.csdn.net/lmj623565791/article/details/38067475          http://www.cnblogs.com/angeldevil/archive/2011/12/02/2271096.html          http://www.tu
阅读更多...
各种算法动画展示，效果不错。

各种算法动画展示，效果不错。

各种算法动画展示： http://www.yxqzzx.cn/teacher/ShowArticle.asp?ArticleID=417
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2