我正在做一个有角度的项目,我想使用particle.js库作为背景。库的链接如下:https://vincentgarreau.com/particles.js/。
我在项目中使用了npm软件包(https://www.npmjs.com/package/angular-particle)。我尝试在我的角度项目中为库使用的代码如下。我在引号中链接的angular-particle包中使用了app.component.html,如下所示。
body {
margin: 0;
font: normal 75% Arial, Helvetica, sans-serif;
}
canvas {
display: block;
}
particles-js {
position: absolute;
width: 100%;
height: 100%;
background-color: #b61924;
/* background-image: url(""); */
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
.count-particles {
border-radius: 0 0 3px 3px;
}
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
myStyle: object = {};
myParams: object = {};
width = 100;
height = 100;
ngOnInit() {
this.myStyle = {
'position': 'fixed',
'width': '100%',
'height': '100%',
'z-index': -1,
'top': 0,
'left': 0,
'right': 0,
'bottom': 0,
};
this.myParams = {
particles: {
'number': {
'value': 80,
'density': {
'enable': true,
'value_area': 800
}
},
'color': {
'value': '#ffffff'
},
'shape': {
'type': 'circle',
'stroke': {
'width': 0,
'color': '#000000'
},
'polygon': {
'nb_sides': 5
},
'image': {
'src': 'img/github.svg',
'width': 100,
'height': 100
}
},
'opacity': {
'value': 0.5,
'random': false,
'anim': {
'enable': false,
'speed': 1,
'opacity_min': 0.1,
'sync': false
}
},
'size': {
'value': 3,
'random': true,
'anim': {
'enable': false,
'speed': 40,
'size_min': 0.1,
'sync': false
}
},
'line_linked': {
'enable': true,
'distance': 150,
'color': '#ffffff',
'opacity': 0.4,
'width': 1
},
'move': {
'enable': true,
'speed': 6,
'direction': 'none',
'random': false,
'straight': false,
'out_mode': 'out',
'bounce': false,
'attract': {
'enable': false,
'rotateX': 600,
'rotateY': 1200
}
}
},
'interactivity': {
'detect_on': 'canvas',
'events': {
'onhover': {
'enable': true,
'mode': 'repulse'
},
'onclick': {
'enable': true,
'mode': 'push'
},
'resize': true
},
'modes': {
'grab': {
'distance': 400,
'line_linked': {
'opacity': 1
}
},
'bubble': {
'distance': 400,
'size': 40,
'duration': 2,
'opacity': 8,
'speed': 3
},
'repulse': {
'distance': 200,
'duration': 0.4
},
'push': {
'particles_nb': 4
},
'remove': {
'particles_nb': 2
}
}
},
'retina_detect': true
};
}
}
我希望在我的角度项目中的particle.js库动画中提供如下结果。但是,当我尝试运行该项目时,它仅显示一个红色的空白页,没有任何粒子和动画。谢谢!