HTML之2022新年快乐虎年大吉给对象的不一样礼物
2024-05-11 03:55:49
你好，我是悦创。
个人博客首发：https://www.aiyc.top/2128.html
效果截图：
在线体验：
https://github.aiyc.top/YearTiger2022/
源码：
https://github.com/AndersonHJB/YearTiger2022
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><style>body {margin: 0;padding: 0;overflow: hidden;}.city {width: 100%;position: fixed;bottom: 0px;z-index: 100;}.city img {width: 100%;}</style><title>2022虎年快乐</title>
</head>
<body onselectstart="return false">
<canvas id='cas' style="background-color:rgba(0,5,24,1)">浏览器不支持canvas</canvas>
<div class="city"><img src="city.png" alt=""/></div>
<img src="moon.png" alt="" id="moon" style="visibility: hidden;"/>
<div style="display:none"><div class="shape">2022新年快乐</div><div class="shape">虎年大吉</div><div class="shape">ヾ(^∀^)ﾉ</div>
</div>
<audio src="boom.mp3" preload="auto"></audio>
<audio src="boom.mp3" preload="auto"></audio>
<audio src="boom.mp3" preload="auto"></audio>
<audio src="boom.mp3" preload="auto"></audio>
<audio src="boom.mp3" preload="auto"></audio>
<audio src="boom.mp3" preload="auto"></audio>
<audio src="shotfire.mp3" preload="auto"></audio>
<audio src="shotfire.mp3" preload="auto"></audio>
<audio src="shotfire.mp3" preload="auto"></audio>
<script>var canvas = document.getElementById("cas");var ocas = document.createElement("canvas");var octx = ocas.getContext("2d");var ctx = canvas.getContext("2d");ocas.width = canvas.width = window.innerWidth;ocas.height = canvas.height = window.innerHeight;var bigbooms = [];window.onload = function() {initAnimate()}function initAnimate() {drawBg();lastTime = new Date();animate();}var lastTime;function animate() {ctx.save();ctx.globalCompositeOperation = 'destination-out';ctx.globalAlpha = 0.1;ctx.fillRect(0, 0, canvas.width, canvas.height);ctx.restore();var newTime = new Date();if (newTime - lastTime > 200 + (window.innerHeight - 767) / 2) {var random = Math.random() * 100 > 2 ? true : false;var x = getRandom(canvas.width / 5, canvas.width * 4 / 5);var y = getRandom(50, 200);if (random) {var bigboom = new Boom(getRandom(canvas.width / 3, canvas.width * 2 / 3), 2, "#FFF", {x: x, y: y});bigbooms.push(bigboom)}else {var bigboom = new Boom(getRandom(canvas.width / 3, canvas.width * 2 / 3), 2, "#FFF", {x: canvas.width / 2,y: 200}, document.querySelectorAll(".shape")[parseInt(getRandom(0, document.querySelectorAll(".shape").length))]);bigbooms.push(bigboom)}lastTime = newTime;}stars.foreach(function() {this.paint();})drawMoon();bigbooms.foreach(function(index) {var that = this;if (!this.dead) {this._move();this._drawLight();}else {this.booms.foreach(function(index) {if (!this.dead) {this.moveTo(index);}else if (index === that.booms.length - 1) {bigbooms.splice(bigbooms.indexOf(that), 1);}})}});raf(animate);}function drawMoon() {var moon = document.getElementById("moon");var centerX = canvas.width - 200, centerY = 100, width = 80;if (moon.complete) {ctx.drawImage(moon, centerX, centerY, width, width)}else {moon.onload = function() {ctx.drawImage(moon, centerX, centerY, width, width)}}var index = 0;for (var i = 0; i < 10; i++) {ctx.save();ctx.beginPath();ctx.arc(centerX + width / 2, centerY + width / 2, width / 2 + index, 0, 2 * Math.PI);ctx.fillStyle = "rgba(240,219,120,0.005)";index += 2;ctx.fill();ctx.restore();}}Array.prototype.foreach = function(callback) {for (var i = 0; i < this.length; i++) {if (this[i] !== null) callback.apply(this[i], [i])}}var raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {window.setTimeout(callback, 1000 / 10);};canvas.onclick = function() {var x = event.clientX;var y = event.clientY;var bigboom = new Boom(getRandom(canvas.width / 3, canvas.width * 2 / 3), 2, "#FFF", {x: x, y: y});bigbooms.push(bigboom)}var Boom = function(x, r, c, boomArea, shape) {this.booms = [];this.x = x;this.y = (canvas.height + r);this.r = r;this.c = c;this.shape = shape || false;this.boomArea = boomArea;this.theta = 0;this.dead = false;this.ba = parseInt(getRandom(80, 200));var audio = document.getElementsByTagName("audio");for (var i = 0; i < audio.length; i++) {if (audio[i].src.indexOf("shotfire") >= 0 && (audio[i].paused || audio[i].ended)) {audio[i].play();break;}}}Boom.prototype = {_paint: function() {ctx.save();ctx.beginPath();ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);ctx.fillStyle = this.c;ctx.fill();ctx.restore();},_move: function() {var dx = this.boomArea.x - this.x, dy = this.boomArea.y - this.y;this.x = this.x + dx * 0.01;this.y = this.y + dy * 0.01;if (Math.abs(dx) <= this.ba && Math.abs(dy) <= this.ba) {if (this.shape) {this._shapBoom();}else this._boom();this.dead = true;}else {this._paint();}},_drawLight: function() {ctx.save();ctx.fillStyle = "rgba(255,228,150,0.3)";ctx.beginPath();ctx.arc(this.x, this.y, this.r + 3 * Math.random() + 1, 0, 2 * Math.PI);ctx.fill();ctx.restore();},_boom: function() {var fragNum = getRandom(100, 300);var style = getRandom(0, 10) >= 5 ? 1 : 2;var color;if (style === 1) {color = {a: parseInt(getRandom(128, 255)),b: parseInt(getRandom(128, 255)),c: parseInt(getRandom(128, 255))}}var fanwei = fragNum;var audio = document.getElementsByTagName("audio");for (var i = 0; i < audio.length; i++) {if (audio[i].src.indexOf("boom") >= 0 && (audio[i].paused || audio[i].ended)) {audio[i].play();break;}}for (var i = 0; i < fragNum; i++) {if (style === 2) {color = {a: parseInt(getRandom(128, 255)),b: parseInt(getRandom(128, 255)),c: parseInt(getRandom(128, 255))}}var a = getRandom(-Math.PI, Math.PI);var x = getRandom(0, fanwei) * Math.cos(a) + this.x;var y = getRandom(0, fanwei) * Math.sin(a) + this.y;var radius = getRandom(0, 2)var frag = new Frag(this.x, this.y, radius, color, x, y);this.booms.push(frag);}},_shapBoom: function() {var that = this;putValue(ocas, octx, this.shape, 5, function(dots) {var dx = canvas.width / 2 - that.x;var dy = canvas.height / 2 - that.y;for (var i = 0; i < dots.length; i++) {color = {a: dots[i].a, b: dots[i].b, c: dots[i].c}var x = dots[i].x;var y = dots[i].y;var radius = 1;var frag = new Frag(that.x, that.y, radius, color, x - dx, y - dy);that.booms.push(frag);}})}}function putValue(canvas, context, ele, dr, callback) {context.clearRect(0, 0, canvas.width, canvas.height);var img = new Image();if (ele.innerHTML.indexOf("img") >= 0) {img.src = ele.getElementsByTagName("img")[0].src;imgload(img, function() {context.drawImage(img, canvas.width / 2 - img.width / 2, canvas.height / 2 - img.width / 2);dots = getimgData(canvas, context, dr);callback(dots);})}else {var text = ele.innerHTML;context.save();var fontSize = 200;context.font = fontSize + "px 宋体 bold";context.textAlign = "center";context.textBaseline = "middle";context.fillStyle = "rgba(" + parseInt(getRandom(128, 255)) + "," + parseInt(getRandom(128, 255)) + "," + parseInt(getRandom(128, 255)) + " , 1)";context.fillText(text, canvas.width / 2, canvas.height / 2);context.restore();dots = getimgData(canvas, context, dr);callback(dots);}}function imgload(img, callback) {if (img.complete) {callback.call(img);}else {img.onload = function() {callback.call(this);}}}function getimgData(canvas, context, dr) {var imgData = context.getImageData(0, 0, canvas.width, canvas.height);context.clearRect(0, 0, canvas.width, canvas.height);var dots = [];for (var x = 0; x < imgData.width; x += dr) {for (var y = 0; y < imgData.height; y += dr) {var i = (y * imgData.width + x) * 4;if (imgData.data[i + 3] > 128) {var dot = {x: x, y: y, a: imgData.data[i], b: imgData.data[i + 1], c: imgData.data[i + 2]};dots.push(dot);}}}return dots;}function getRandom(a, b) {return Math.random() * (b - a) + a;}var maxRadius = 1, stars = [];function drawBg() {for (var i = 0; i < 100; i++) {var r = Math.random() * maxRadius;var x = Math.random() * canvas.width;var y = Math.random() * 2 * canvas.height - canvas.height;var star = new Star(x, y, r);stars.push(star);star.paint()}}var Star = function(x, y, r) {this.x = x;this.y = y;this.r = r;}Star.prototype = {paint: function() {ctx.save();ctx.beginPath();ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);ctx.fillStyle = "rgba(255,255,255," + this.r + ")";ctx.fill();ctx.restore();}}var focallength = 250;var Frag = function(centerX, centerY, radius, color, tx, ty) {this.tx = tx;this.ty = ty;this.x = centerX;this.y = centerY;this.dead = false;this.centerX = centerX;this.centerY = centerY;this.radius = radius;this.color = color;}Frag.prototype = {paint: function() {// ctx.beginPath();// ctx.arc(this.x , this.y , this.radius , 0 , 2*Math.PI);ctx.fillStyle = "rgba(" + this.color.a + "," + this.color.b + "," + this.color.c + ",1)";ctx.fillRect(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2)},moveTo: function(index) {this.ty = this.ty + 0.3;var dx = this.tx - this.x, dy = this.ty - this.y;this.x = Math.abs(dx) < 0.1 ? this.tx : (this.x + dx * 0.1);this.y = Math.abs(dy) < 0.1 ? this.ty : (this.y + dy * 0.1);if (dx === 0 && Math.abs(dy) <= 80) {this.dead = true;}this.paint();}}</script>
</body>
</html>
AI悦创·推出辅导班啦，包括「Python 语言辅导班、C++辅导班、算法/数据结构辅导班、少儿编程、pygame 游戏开发」，全部都是一对一教学：一对一辅导 + 一对一答疑 + 布置作业 + 项目实践等。QQ、微信在线，随时响应！V：Jiabcdefh，公众号：AI悦创
HTML之2022新年快乐虎年大吉给对象的不一样礼物相关推荐
- 2022.12.23-Python100day-day05-面向对象编程
1.面向对象编程 -----> 程序复杂 对象很多的时候 对象:接受消息的实体 对象的属性: 1.一切皆为对象: 2.对象都有属性和行为: 3.每个对象都是独一无二的: 4.对象一定属于某个类 ...
- 快品牌，大品牌，快手新市井电商2022的重点发展对象
快手,正在重新定义直播电商. 2021年,全面启动电商化战略的快手向电商全行业展现了它强大的流量效应,尽管相比其他平台起步较晚,但是快手凭借庞大的用户规模和一系列有效.直接的产业扶持战略,最终在一年的 ...
- 2022，虎年大吉！
聚焦源代码安全,网罗国内外最新资讯! 推荐阅读 在线阅读版:<2021中国软件供应链安全分析报告>全文 奇安信开源卫士率先通过可信开源治理工具评估 Linux 系统服务漏洞PwnKit ...
- 【2022 新年快乐】ORACLE发布Primavera P6,Unifier最新版:21.12
目录 Primavera Unifier 21.12 Primavera P6 21.12 Primavera Gateway Primavera Analytics ORACLE 如何产品获取 按照 ...
- 38女神节，程序员如何给对象挑选合适的礼物
本期就由小编来给大家掰扯掰扯 38女神节礼物的盘点~ 你们的刘老师已经搬好小板凳,在评论区候着了~ 很想吐槽,有一个程序员男盆友,收礼物的时候,不是衣服就是口红,emmm... 礼物这种东西,也不是很 ...
- 虎年第一篇-CCNP-第九篇-BGP(一)
CCNP-第九篇-BGP(一) 首先,开工啦,祝大家2022新年快乐虎年大吉,虎虎生威哦 BGP是一个网络工程师的分水岭 这是真的,BGP一般很大的企业才能用得上,或者ISP运营商 人家可以不用,但是 ...
- JS内置对象操作方法整理
JS对象操作方法整理 文章目录 JS对象操作方法整理 数组 ES5 ES6 字符串 String 日期 Date() 数字 Number 算数 Math 数组 ES5 concat() 连接两个或更多 ...
- 复盘2021，拥抱2022！
前言: 大家好,首先祝大家2022新年快乐,2022越来越好! 2022年的第一天,进行了一场人生第一次夜爬:梧桐山.这次非常具有挑战性,一个是夜爬,晚上的环境因素:还有一个是道路的难走(人是真的多, ...
- 2022/3/21-2022/3/22
2022/3/21 今天在写代码的时候遇到了一个bug,就是当我打开表格弹窗,第一次可以修改数据,重新打开再也修改不了数据, 不知道问题出在哪里,于是就在Object.assign后面加上了 this ...
最新文章
- pandas groupby
- Linux性能监控和调试
- GeoIP的使用-C语言版
- 第四篇 HTML 表单深入了解、注释和a标签的运用
- 从零开始--系统深入学习android（实践-让我们开始写代码-Android框架学习-2.service）...
- 性能测试—接口压测指标分析
- 培训师 每小时多少钱_每个产品设计师需要了解的品牌知识
- Spring Boot中使用模板引擎引用资源
- HoloLens 2开发：HoloLens开发VS安装与配置
- POJ 2635 The Embarrassed Cryptographer(JAVA)
- Linux一些最基本命令
- 移动咪咕盒子10款型号刷机固件汇总分享（附刷机教程）
- python视频大全
- IT项目管理 第三章
- NopCommerce源码架构详解--TypeFinder程序集类型自动查找及操作相关源码分析
- 华为S5700交换机通过命令开启snmp功能
- DCGAN生成动漫人物头像---pytroch版
- 一个程序员近20年工资单
- 小程序setData执行后，页面没有刷新
- docker安装和portainer安装