109 lines
3.2 KiB
Vue
109 lines
3.2 KiB
Vue
<script>
|
|
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
// granim1: null,
|
|
// granim2: null
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initGradients()
|
|
this.initTrame()
|
|
window.addEventListener("resize", this.onWindowResize.bind(this));
|
|
},
|
|
// computed: {
|
|
// },
|
|
// created () {
|
|
// },
|
|
methods: {
|
|
initGradients () {
|
|
let gradientBackground = this.$refs['background-gradient'];
|
|
|
|
let gradients = [];
|
|
let num_colors = Math.floor(2 + Math.random()*2);
|
|
for (let i = 0; i < Math.floor(2 + Math.random()*4); i++) {
|
|
// for (let i = 0; i < 1; i++) {
|
|
let colors = [];
|
|
// let hue = Math.floor(Math.random()*360)
|
|
for (let j = 0; j < num_colors; j++) {
|
|
let pos = (1/num_colors*j + 1/num_colors/3 + Math.random()*1/num_colors/3)*100;
|
|
// console.log('gradient pos', pos);
|
|
|
|
colors.push({
|
|
color: this.getRandBGColor(),
|
|
// pos: parseFloat(`${parseFloat(Math.random()).toFixed(2)}`.slice(1))
|
|
// pos: parseFloat(`${parseFloat(pos).toFixed(2)}`.slice(1))
|
|
pos: parseInt(pos)
|
|
})
|
|
}
|
|
// colors.sort((a,b) => {
|
|
// return a.pos > b.pos ? 1 : -1
|
|
// })
|
|
gradients.push(colors)
|
|
}
|
|
// console.log('gradients', gradients);
|
|
|
|
let cssgrad = '';
|
|
gradients.forEach((gradient, index) => {
|
|
let alpha = Math.floor(Math.random()*360);
|
|
cssgrad += `\n linear-gradient(${alpha}deg`;
|
|
gradient.forEach(color => {
|
|
cssgrad += `, ${color.color} ${color.pos}%`
|
|
});
|
|
cssgrad += index < gradients.length-1 ? '),' : ')';
|
|
});
|
|
// cssgrad += ';';
|
|
// console.log('cssgrad', cssgrad);
|
|
gradientBackground.style.background = cssgrad;
|
|
},
|
|
getRandBGColor (hue) {
|
|
let h = !hue ? Math.floor(Math.random()*360) : hue + -30 + Math.floor(Math.random()*60);
|
|
let s = 25 + Math.floor(Math.random()*5);
|
|
let l = 40 + Math.floor(Math.random()*10);
|
|
let a = `${parseFloat(0.2 + Math.random()*.4).toFixed(3)}`.slice(1);
|
|
let hsla = `hsla(${h}, ${s}%, ${l}%, ${a})`;
|
|
// console.log(hsla);
|
|
return hsla;
|
|
},
|
|
initTrame () {
|
|
let canvasBackgroundTrame = this.$refs['canvas-background-trame'];
|
|
canvasBackgroundTrame.width = canvasBackgroundTrame.parentElement.clientWidth;
|
|
canvasBackgroundTrame.height = canvasBackgroundTrame.parentElement.clientHeight;
|
|
let ctx = canvasBackgroundTrame.getContext('2d');
|
|
|
|
ctx.clearRect(0,0, canvasBackgroundTrame.width, canvasBackgroundTrame.height);
|
|
|
|
let step = 1;
|
|
for (let i = 0; i < parseInt(canvasBackgroundTrame.width); i+=step) {
|
|
for (let j = 0; j < parseInt(canvasBackgroundTrame.height); j+=step) {
|
|
if (Math.random() > 0.6) {
|
|
ctx.beginPath();
|
|
// ctx.arc(i, j, 0.5, 0, 2 * Math.PI, false);
|
|
ctx.rect(i, j, 1, 1);
|
|
ctx.fillStyle = "rgba(0,0,0,0.1)";
|
|
ctx.fill();
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
onWindowResize () {
|
|
this.initTrame()
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="map-bg gradient" ref="background-gradient"></div>
|
|
<canvas class="map-bg trame" ref="canvas-background-trame"></canvas>
|
|
</template>
|
|
|
|
<style lang="css" scoped>
|
|
|
|
</style>
|