uniapp--dynamic background effects 1

<template>
	<view class="page-content">
		<!-- js生成原生canvas -->
		<view class="loading" v-if="is_loading">
			<view class="spinner">
				<view class="rect1"></view>
				<view class="rect2"></view>
				<view class="rect3"></view>
				<view class="rect4"></view>
				<view class="rect5"></view>
			</view>
		</view>
		<view class="page-info" :style="'background: url('+dataInfo[0].cover+');'" v-else>
			<div id="message"></div>
			<view class="censtop">
				<image :src="dataInfo[1].cover" mode="widthFix" class="title-img"></image>
				<view class="content-meet">
					<image @click="toUrl(dataInfo[2].link)" :src="dataInfo[2].cover+'?x-oss-process=image/format,webp'"
						mode="widthFix" class="content-img">
					</image>
					<image @click="toUrl(dataInfo[3].link)" :src="dataInfo[3].cover+'?x-oss-process=image/format,webp'"
						mode="widthFix" class="content-img">
					</image>
					<image @click="toUrl(dataInfo[4].link)" :src="dataInfo[4].cover+'?x-oss-process=image/format,webp'"
						mode="widthFix" class="content-img">
					</image>
					<image @click="toUrl(dataInfo[5].link)" :src="dataInfo[5].cover+'?x-oss-process=image/format,webp'"
						mode="widthFix" class="content-img">
					</image>
					<image @click="toUrl(dataInfo[6].link)" :src="dataInfo[6].cover+'?x-oss-process=image/format,webp'"
						mode="widthFix" class="content-img">
					</image>
					<image @click="toUrl(dataInfo[7].link)" :src="dataInfo[7].cover+'?x-oss-process=image/format,webp'"
						mode="widthFix" class="content-img">
					</image>
				</view>
				<view class="footer">
					<image @click="toUrl(dataInfo[8].link)" :src="dataInfo[8].cover+'?x-oss-process=image/format,webp'"
						mode="widthFix" class="footer-img">
					</image>
				</view>
				<view class="footer" style="padding-bottom: 100rpx;">
					<image :src="dataInfo[9].cover+'?x-oss-process=image/format,webp'" mode="widthFix"
						class="footer-img">
					</image>
				</view>
			</view>
		</view>

		<view class="to-top" v-if="showToTop" @click="toTop">
			<view class="iconfont">
				&#xe7ed;
			</view>
		</view>
	</view>
</template>

<script>
	var _hmt = _hmt || [];
	(function() {
		// var video1 = document.createElement("script");
		// video1.src = "https://yunxc.test.yun-live.com/js/liszi1.js";
		// var s1 = document.getElementsByTagName("script")[0];
		// s1.parentNode.insertBefore(video1, s1);

	})();
	var liveCountTimes = setInterval(() => {

		(function() {
			var str = '<canvas id="canvas"></canvas>';
			document.getElementById("message").insertAdjacentHTML('beforeend', str);


			var canvas = document.getElementById('canvas');

			if (!canvas || !canvas.getContext) {
				return false;
			}

			/********************
			  Random Number
			********************/

			function rand(min, max) {
				return Math.floor(Math.random() * (max - min + 1) + min);
			}

			/********************
			  Var
			********************/

			// canvas 
			var ctx = canvas.getContext('2d');
			var X = canvas.width = window.innerWidth;
			var Y = canvas.height = window.innerHeight;
			var mouseX = X / 2;
			var mouseY = Y / 2;

			/********************
			  Animation
			********************/

			window.requestAnimationFrame =
				window.requestAnimationFrame ||
				window.mozRequestAnimationFrame ||
				window.webkitRequestAnimationFrame ||
				window.msRequestAnimationFrame ||
				function(cb) {
					setTimeout(cb, 17);
				};

			/********************
			  Moon
			********************/

			var moonNum = 1;
			var moons = [];
			var radius = X / 2;

			if (X < 768) {
				radius = X / 2;
			}

			function Moon(ctx, x, y) {
				this.ctx = ctx;
				this.init(x, y);
			}

			Moon.prototype.init = function(x, y) {
				this.x = x;
				this.y = y;
				this.c = '255, 255, 255';
				this.r = radius;
			};

			Moon.prototype.resize = function() {
				this.x = X / 2;
				this.y = Y / 2;
				this.r = radius;
			};

			Moon.prototype.render = function() {
				this.draw();
			};

			Moon.prototype.draw = function() {
				ctx.save();
				ctx.beginPath();
				ctx.globalAlpha = 0.8;
				var col = this.c;
				var g = ctx.createRadialGradient(this.x, this.y, this.r, X / 2 - this.r, Y / 2, 0);
				g.addColorStop(0, "rgba(" + col + ", " + (1 * 1) + ")");
				g.addColorStop(0.5, "rgba(" + col + ", " + (1 * 0.2) + ")");
				g.addColorStop(1, "rgba(" + col + ", " + (1 * 0) + ")");
				ctx.fillStyle = g;
				// ctx.arc(this.x, this.y, this.r, Math.PI * 2, false);
				ctx.fill();
				ctx.restore();
			};

			for (var i = 0; i < moonNum; i++) {
				var moon = new Moon(ctx, 0, 0);
				moons.push(moon);
			}

			/********************
			  Particle
			********************/

			var particleNum = 6; //数量
			var particles = [];
			var maxParticles = 1;

			var colors = ['rgb(241, 251, 240)', 'rgb(244, 250, 241)', 'rgb(238, 250, 242)',
				'rgb(243, 249, 250)'
			];

			if (X < 768) {
				particleNum = 6;
			}

			function Particle(ctx, x, y, r) {
				this.ctx = ctx;
				this.init(x, y, r);
			}

			Particle.prototype.init = function(x, y, r) {
				this.x = x;
				this.y = y;
				this.r = r;
				this.s = 0.1;
				this.ga = rand(0, 1) + 0.1;
				this.v = {
					x: 0,
					y: 0
				};
				/*
				this.c = {
				  r: rand(0, 255),
				  g: rand(0, 255),
				  b: rand(0, 255)
				};
				*/
				this.c = colors[rand(0, colors.length - 1)];
			};

			Particle.prototype.closest = function(i) {
				var x = this.x - mouseX;
				var y = this.y - mouseY;
				var d = x * x + y * y;
				var newDist = Math.sqrt(d);
				this.v.x = x / newDist * (1 + this.s);
				this.v.y = y / newDist * (1 + this.s);
				this.r += 0.05;
				this.x += this.v.x;
				this.y += this.v.y;
				if (Math.abs(this.x - mouseX) < 10 && Math.abs(this.y - mouseY) < 10) {
					this.x = rand(0, X);
					this.y = rand(0, Y);
					this.s = 0.1;
					this.r = 1;
				}
				if (this.x < 0 || this.x > X) {
					this.x = rand(0, X);
					this.s = 0.1;
					this.r = 1;
				}
				if (this.y < 0 || this.y > Y) {
					this.y = rand(0, Y);
					this.s = 0.1;
					this.r = 1;
				}
			};

			Particle.prototype.updateParams = function() {
				this.s += 0.05;
			};

			Particle.prototype.resize = function() {
				this.x = rand(0, X);
				this.y = rand(0, Y);
			};

			Particle.prototype.draw = function() {
				var ctx = this.ctx;
				ctx.save();
				ctx.beginPath();
				ctx.globalAlpha = this.ga;
				ctx.fillStyle = this.c;
				ctx.globalCompositeOperation = 'lighter';
				//ctx.fillStyle = 'rgb(' + this.c.r + ', ' + this.c.g + ', ' + this.c.b + ')';
				ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
				ctx.fill();
				ctx.restore();
			};

			Particle.prototype.render = function(i) {
				this.closest(i);
				this.updateParams();
				this.draw();
			};

			for (var i = 0; i < particleNum; i++) {
				var particle = new Particle(ctx, rand(0, X), rand(0, Y), 1);
				particles.push(particle);
			}

			/********************
			  Text
			********************/

			var text = 'Please holding down the mouse.';

			function drawText() {
				ctx.save();
				ctx.fillStyle = 'rgb(0, 137, 190)';
				ctx.font = '16px "sans-serif"';
				ctx.textAlign = 'center';
				ctx.textBaseline = 'middle';
				// ctx.fillText(text, X / 2, Y / 2);
			}

			/********************
			  Render
			********************/

			function render() {
				ctx.clearRect(0, 0, X, Y);
				moons[0].render();
				drawText();
				for (var i = 0; i < particles.length; i++) {
					particles[i].render(i);
				}
				requestAnimationFrame(render);
			}

			render();

			/********************
			  Event
			********************/

			function onResize() {
				X = canvas.width = window.innerWidth;
				Y = canvas.height = window.innerHeight;
				moons[0].render();
				for (var i = 0; i < particles.length; i++) {
					particles[i].resize();
				}
			}

			window.addEventListener('resize', function() {
				onResize();
			});

			var clearId;
			
			// 点击事件
			// window.addEventListener('mousedown', function() {
			// 	clearId = setInterval(function() {
			// 		for (var i = 0; i < particles.length; i++) {
			// 			particles[i].s += 1;
			// 			particles[i].r += 2;
			// 		}
			// 		text = 'Warp';
			// 		moons[0].r += 0.5;
			// 	}, 20);
			// });

			// window.addEventListener('mouseup', function() {
			// 	clearInterval(clearId);
			// 	text = 'Please holding down the mouse.';
			// });

			// window.addEventListener('mousemove', function(e) {
			// 	mouseX = e.clientX;
			// 	mouseY = e.clientY;
			// });

			// window.addEventListener('touchstart', function(e) {
			// 	var touch = event.targetTouches[0];
			// 	mouseX = touch.pageX;
			// 	mouseY = touch.pageY;
			// 	clearId = setInterval(function() {
			// 		for (var i = 0; i < particles.length; i++) {
			// 			particles[i].s += 1;
			// 			particles[i].r += 3;
			// 		}
			// 		text = 'Warp';
			// 		moons[0].r += 0.5;
			// 	}, 20);
			// }, false);

			// window.addEventListener('touchend', function(e) {
			// 	clearInterval(clearId);
			// 	text = '';
			// });

		})();



		clearInterval(liveCountTimes)
	}, 800)
	import store from '@/store';
	export default {
		data() {
			return {
				meeting_id: '3080',
				dataInfo: [],
				uid: '',
				is_loading: false,
				showToTop: false,
				windowH: 0,
				objBase: {}
			}
		},
		onLoad() {
			this.is_loading = true
			this.uid = uni.getStorageSync('uid')
			this.getInfo()
		},
		onPageScroll(e) {
			if (e.scrollTop >= this.windowH) {
				this.showToTop = true;
			} else {
				this.showToTop = false;
			}
		},
		methods: {
			// 获取数据
			getInfo() {
				const that = this;
				uni.request({
					url: 'https://www.yun-live.com/api/getExperienceWeek?uid=' + this.uid + '&meeting_id=' + this
						.meeting_id,
					success: (res) => {
						uni.setNavigationBarTitle({
							title: res.data.data.title
						})
						this.objBase = res.data.data.base
						// #ifdef H5
						var vlink = window.location.href; //分享链接
						var vstatus = 1; //标识为分享
						var vtitle = this.objBase.title ? this.objBase.title : '云现场_会议融媒体中心'; //标题
						var vdesc = this.objBase.wechat_info ? this.objBase.wechat_info :
							'云现场提供一站式会议活动宣传解决方案，集云速记、图文直播、照片直播、视频直播于一身，拥有全国一线的媒体资源和宣发渠道，媒体+工具双重属性，打造会议新场景，现已覆盖全国100+个城市'; //简介
						var vimgUrl = this.objBase.wechat_cover ? this.objBase.wechat_cover :
							'https://www.yun-live.com/images/live_default_cover.png'; //分享图片
						store.wxcall(vstatus, vtitle, vdesc, vimgUrl, vlink); //微信分享 //
						// #endif
						this.is_loading = false
						this.dataInfo = res.data.data.videoupright
						console.log(this.dataInfo)
						uni.getSystemInfo({
							success: function(res) {
								that.windowH = res.windowHeight
							}
						});
					}
				})
			},
			toUrl(url) {
				if (url) {
					window.location.href = url
				} else {
					uni.showToast({
						title: '敬请期待！',
						duration: 2000,
						icon: 'none'
					});
				}
			},
			toTop() {
				uni.pageScrollTo({
					scrollTop: 0
				})
			},
		}
	}
</script>

<style lang="scss">

	a {
		color: #FFF;
		text-decoration: none;
	}

	h1 {
		font-size: 1.6rem;
	}

	p {
		padding: 0.8rem 0;
		font-size: 0.8rem;
	}

	header#header {
		position: absolute;
		top: 0;
		left: 0;
		padding: 1.6rem;
	}

	/********************
	  Contents
	********************/

	canvas#canvas {
		background: #000;
	}


	body {
		background-color: #2057A2;
	}

	.censtop {
		position: absolute;
		top: 0px;
		// width: 100%;
		z-index: 99;
		max-width: 750px;
	}

	.to-top {
		position: fixed;
		bottom: 178rpx;
		right: 24rpx;
		width: 88rpx;
		height: 88rpx;
		line-height: 88rpx;
		background: #FFFFFF;
		border: 3rpx solid rgba(152, 159, 179, 0.5);
		border-radius: 50%;
		overflow: hidden;
		text-align: center;
		z-index: 9999;
		color: #10347E;

		.iconfont {
			font-size: 50rpx !important;
		}
	}

	.page-info {
		width: 100%;
		max-width: 750px;
		min-height: 110vh;
		background-color: #10347E;
		margin: 0 auto;
		// background-image: url(https://s.yun-live.com/images/20211220/a2c12f5e36d3b38e54b8bf7926d8eaf2.png);
		background-position: center;
		background-size: 100% 100%;

		.header-img {
			width: 100%;
			// margin: 86rpx 40rpx 60rpx;
		}

		.title-img {
			width: 661rpx;
			display: block;
			margin: 0 auto;
		}

		.content-meet {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 0 40rpx;

			.content-img {
				width: 215rpx;
				margin-top: 10rpx;
			}
		}

		.footer {
			text-align: center;
			padding: 0 40rpx;
			margin-top: 30rpx;

			.footer-img {
				width: 100%;
				margin-top: 15rpx;
			}
		}

	}

	@media screen and (min-width:750px) {
		.page-info {
			.header-img {
				width: 661px;
				margin: 86px 40px 60px;
			}

			.page-info {
				max-width: 750px;
				min-height: 156vh;

			}

			.title-img {
				width: 661px;
				display: block;
				margin: 0 auto;
			}

			.content-meet {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
				padding: 0 30px;

				.content-img {
					width: 220px;
					margin-top: 20px;
				}
			}

			.footer {
				text-align: center;
				padding: 0 30px;
				background-image: url(https://s.yun-live.com/images/20220323/7cbd60a81d7157544256a3b996fffd31.png);
				background-position: center;
				background-size: 100% 100%;
				margin-top: 0rpx;

				.footer-img {
					width: 100%;
					margin-top: 20px;
				}
			}
		}
	}
</style>