vue 动态背景（星海）

项目需要做个动态背景直接放代码

html部分

<canvas id="space"></canvas>

css:

    #space {width: 100%;height: 100%;display: block;vertical-align: baseline;position: absolute;z-index: -5;}

setBackGroundImg() {window.requestAnimFrame = (function () {return window.requestAnimationFrame})();var canvas = document.getElementById("space");var c = canvas.getContext("2d");var numStars = 1900;var radius = '0.' + Math.floor(Math.random() * 9) + 1;var focalLength = canvas.width * 2;var warp = 0;var centerX, centerY;var stars = [], star;var i;var animate = true;initializeStars();function executeFrame() {if (animate)window.requestAnimFrame(executeFrame);moveStars();drawStars();}function initializeStars() {centerX = canvas.width / 2;centerY = canvas.height / 2;stars = [];for (i = 0; i < numStars; i++) {star = {x: Math.random() * canvas.width,y: Math.random() * canvas.height,z: Math.random() * canvas.width,o: '0.' + Math.floor(Math.random() * 99) + 1};stars.push(star);}}function moveStars() {for (i = 0; i < numStars; i++) {star = stars[i];star.z--;if (star.z <= 0) {star.z = canvas.width;}}}function drawStars() {var pixelX, pixelY, pixelRadius;// Resize to the screenif (canvas.width !== window.innerWidth || canvas.width !== window.innerWidth) {canvas.width = window.innerWidth;canvas.height = window.innerHeight;initializeStars();}if (warp === 0) { // 此代码块改背景色为渐变色var grd=c.createRadialGradient(canvas.width,canvas.height,canvas.width,canvas.width,canvas.height,1000);grd.addColorStop(0,"rgba(1, 9, 41, 0.6)");grd.addColorStop(1,"rgba(2, 8, 36, 0.6)");c.fillStyle = grd;c.fillRect(0, 0, canvas.width, canvas.height);}c.fillStyle = "rgba(209, 255, 255, " + radius + ")";for (i = 0; i < numStars; i++) {star = stars[i];pixelX = (star.x - centerX) * (focalLength / star.z);pixelX += centerX;pixelY = (star.y - centerY) * (focalLength / star.z);pixelY += centerY;pixelRadius = 1 * (focalLength / star.z);c.fillRect(pixelX, pixelY, pixelRadius, pixelRadius);c.fillStyle = "rgba(209, 255, 255, " + star.o + ")";//c.fill();}}executeFrame();}

效果图：

vue 动态背景（星海）相关推荐

vue动态监听窗口高度 - 全背景banner
vue动态监听窗口高度 - 全背景banner 参考项目文件 src/hr/index.vue [结合下文:第一种方法] 第一种方法:[本文手写代码] data() {return {screenHe ...
前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录/注册页)
一.文章引导 #mermaid-svg-9sKRaMRBkdCcbAh2 {font-family:"trebuchet ms",verdana,arial,sans-serif; ...
vue 项目中使实现粒子动态背景图
在vue中,实现粒子动态背景图的效果首先安装插件 npm install vue-particles --save-dev 在main.js 文件中进行引用注册 // 动态粒子 import Vu ...
vue改变html的背景,vue动态改变背景图片demo分享
如下所示: #bag{ width: 200px; height: 500px; margin: 0 auto; background: url(img/piao11.jpg) center no-r ...
模仿CSDN黑暗帝国动态背景的vue项目(附源码)
开发工具:Webstorm 技术栈:vue.html.canvas 实现效果(其实这里面的是动态变换的,只是没有截成GIF动图): 实现步骤: (1)在这里的项目我是用VueCli3脚手架进行搭建的. ...
vue动态更改背景图
文章目录前言一.要怎么做? 二.使用步骤 1.在data中写入数据 2.添加背景图到div处总结前言例如:项目中我们需要动态改变背景图. 一.要怎么做? 示例:1.首先我们要拿到数据中背景图 ...
vanta.js的使用（前端网站动态背景）
vanta.js可以为网站设置炫酷的动态背景比如在网站登陆的首页官网 Vanta.js - Animated 3D Backgrounds For Your Website npm官网 vanta ...
项目看板开发经验分享(一)——光伏绿色能源看板（可复用组件、条件动态背景图、flex布局应用、v-for遍历列表多重绝对定位）
今天新开一个系列,专门介绍近期工作中开发的几个比较酷炫的看板的开发思路与经验分享.第一节我们就来介绍下这个光伏绿色能源看板,整体浏览如下: UED提供的原设计图,这波还原的还不错吧? 那就直接进入正题 ...
动态背景组件（vue-particles）
动态背景组件(vue-particles) 启用 vue-particles 粒子背景插件(main.js) 动态背景组件(AnimatedWallpaper.vue) 使用方式效果图启用 vue ...

vue 动态背景（星海）

vue 动态背景（星海）相关推荐

最新文章

热门文章