|
@@ -52,21 +52,39 @@ export default {
|
|
|
}
|
|
|
console.log(gradients);
|
|
|
let custDir;
|
|
|
+ // switch (direction) {
|
|
|
+ // case 1:
|
|
|
+ // custDir = {
|
|
|
+ // x0: `${Math.random() * canvas.width}px`,
|
|
|
+ // y0: `-100px`,
|
|
|
+ // x1: `${Math.random() * canvas.width}px`,
|
|
|
+ // y1: `${canvas.height + 100}px`
|
|
|
+ // }
|
|
|
+ // break;
|
|
|
+ // case 2:
|
|
|
+ // custDir = {
|
|
|
+ // x0: `-100px`,
|
|
|
+ // y0: `${Math.random() * canvas.height}px`,
|
|
|
+ // x1: `${canvas.width + 100}px`,
|
|
|
+ // y1: `${Math.random() * canvas.height}px`
|
|
|
+ // }
|
|
|
+ // break;
|
|
|
+ // }
|
|
|
switch (direction) {
|
|
|
case 1:
|
|
|
custDir = {
|
|
|
- x0: `${Math.random() * canvas.width}px`,
|
|
|
+ x0: `${Math.random() * canvas.width/3}px`,
|
|
|
y0: `-100px`,
|
|
|
- x1: `${Math.random() * canvas.width}px`,
|
|
|
+ x1: `${canvas.width/3*2 + Math.random() * canvas.width/3}px`,
|
|
|
y1: `${canvas.height + 100}px`
|
|
|
}
|
|
|
break;
|
|
|
case 2:
|
|
|
custDir = {
|
|
|
- x0: `-100px`,
|
|
|
- y0: `${Math.random() * canvas.height}px`,
|
|
|
- x1: `${canvas.width + 100}px`,
|
|
|
- y1: `${Math.random() * canvas.height}px`
|
|
|
+ x0: `${canvas.width/3*2 + Math.random() * canvas.width/3}px`,
|
|
|
+ y0: `-100px`,
|
|
|
+ x1: `${Math.random() * canvas.width/3}px`,
|
|
|
+ y1: `${canvas.height + 100}px`
|
|
|
}
|
|
|
break;
|
|
|
}
|
|
@@ -78,7 +96,7 @@ export default {
|
|
|
states : {
|
|
|
"default-state": {
|
|
|
gradients: gradients,
|
|
|
- transitionSpeed: 60000
|
|
|
+ transitionSpeed: 20000 + Math.random() * 20000
|
|
|
}
|
|
|
},
|
|
|
})
|
|
@@ -87,7 +105,7 @@ export default {
|
|
|
let h = !hue ? Math.floor(Math.random()*360) : hue + -30 + Math.floor(Math.random()*60);
|
|
|
let s = 40 + Math.floor(Math.random()*20);
|
|
|
let l = 40 + Math.floor(Math.random()*10);
|
|
|
- let a = `${parseFloat(Math.random()*.9).toFixed(3)}`.slice(1);
|
|
|
+ let a = `${parseFloat(0.2 + Math.random()*.4).toFixed(3)}`.slice(1);
|
|
|
let hsla = `hsla(${h}, ${s}%, ${l}%, ${a})`;
|
|
|
// console.log(hsla);
|
|
|
return hsla;
|
|
@@ -119,8 +137,8 @@ export default {
|
|
|
|
|
|
<template>
|
|
|
<canvas class="map-bg-canvas gradient" ref="canvas-background-gradient1"></canvas>
|
|
|
- <canvas class="map-bg-canvas gradient" ref="canvas-background-gradient2"></canvas>
|
|
|
<canvas class="map-bg-canvas trame" ref="canvas-background-trame"></canvas>
|
|
|
+ <canvas class="map-bg-canvas gradient" ref="canvas-background-gradient2"></canvas>
|
|
|
</template>
|
|
|
|
|
|
<style lang="css" scoped>
|