Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » AYUDA AMIGOS, NO MANDA ERRORES Y TAMPOCO DIBUJA EN EL CANVAS

JavaScript - AYUDA AMIGOS, NO MANDA ERRORES Y TAMPOCO DIBUJA EN EL CANVAS

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 8
Ha aumentado su posición en 359 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

AYUDA AMIGOS, NO MANDA ERRORES Y TAMPOCO DIBUJA EN EL CANVAS

Publicado por CRISTIAN OMAR (13 intervenciones) el 29/03/2021 19:07:50
#NO DOY CON EL POR QUE NO PUEDO DIBUJAR EN EL CANVAS, SALUDOS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<title>Animated Clouds Effect</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#25364f,#4d71a5,#9bc4ff);
}
</style>
</head>
<body>
<canvas id='canvas'></canvas>
<script type="text/javascript">
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
 
let particleArray = [];
const colours = [
    'white',
    'rgba(255,255,255,0.3)',
    'rgba(173,216,230,0.8)',
    'rgba(211,211,211,0.3)'
];
 
const maxSize = 40;
const minSize = 0;
const mouseRadius = 60;
 
//mouse position
let mouse = {
    x: null,
    y: null
}
 
window.addEventListener('mousemove', function (event) {
        mouse.x = event.x;
        mouse.y = event.y;
        console.log(mouse);
    }
)
 
//create constructor function for particle
function Particle(x, y, directionX, directionY, size, colour) {
    this.x = x;
    this.y = y;
    this.directionX = directionX;
    this.directionY = directionY;
    this.size = size;
    this.colour = colour;
}
 
//add draw method to particle prototype
Particle.prototype.draw = function () {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
    ctx.fillStyle = this.colour;
    ctx.fill();
}
 
//add update method to particle prototype
Particle.prototype.update = function () {
    if (this.x + this.size * 2 > canvas.width || this.x - this.size * 2 < 0) {
        this.directionX = -this.directionX;
    }
    if (this.y + this.size * 2 > canvas.height || this.y - this.size * 2 < 0) {
        this.directionY = -this.directionY;
    }
    this.x += this.directionX;
    this.y += this.directionY;
 
    //mouse interactivity
    if (mouse.x - this.x < mouseRadius && mouse.x - this.x > mouseRadius && mouse.y - this.y < mouseRadius && mouse.y - this.y > mouseRadius ) {
        if (this.size < maxSize) {
            this.size += 3;
        }
    } else if (this.size > minSize) {
        this.size -= 0.1;
    } if (this.size < 0) {
        this.size = 0;
    }
    this.draw();
 
}
 
//create particle array
function init() {
    particleArray = [];
    for (let i=0; i < 1000; i++) {
        let size = 0;
        let x = (Math.random() * ((innerWidth - size * 2) - (size * 2)) + size * 2);
        let y = (Math.random() * ((innerHeight - size * 2) - (size * 2)) + size * 2);
        let directionX = (Math.random() * .2) - .1;
        let directionY = (Math.random() * .2) - .1;
        let colour = colours[Math.floor(Math.random() * colours.length)];
 
        particleArray.push(new Particle(x, y, directionX, directionY, size, colour));
    }
}
 
//animation loop
function animate() {
    requestAnimationFrame(animate);
    ctx.clearRect(0 , 0, innerWidth, innerHeight);
 
    for (let i = 0; i < particleArray.length; i ++) {
        particleArray[i].update();
    }
}
 
init();
animate();
 
window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    init();
 
})
 
</script>
</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil
Val: 8
Ha aumentado su posición en 359 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

AYUDA AMIGOS, NO MANDA ERRORES Y TAMPOCO DIBUJA EN EL CANVAS

Publicado por CRISTIAN OMAR (13 intervenciones) el 30/03/2021 01:53:51
#Es la segunda vez que tengo que usar querySelector, pero se resuelve con un código diferente que encontré

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<title>Animated Clouds Effect</title>
<style type="text/css">
 
body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    background-image: radial-gradient(#dff9fb 0%, #abe1e4 100%);
    background-attachment: fixed;
}
.container {
    position: relative;
    z-index: 1;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
h1 {
    font-size: 70px;
    color: #fff;
    text-shadow: 3px 3px 3px rgba(41,128,185,.8);
}
p {
    margin-top: -20px;
    font-size: 30px;
    color: #000;
}
#canvas {
    position: fixed;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
 
.youtube-link {
    position: fixed;
    left: 20px;
    bottom: 20px;
    color: #000;
    text-decoration: none;
    font-size: 12px;
}
 
</style>
 
</head>
<body>
<canvas id='canvas'></canvas>
 
<div class="container">
    <h1>Balls mouse trail effect</h1>
    <p>Move the mouse cursor</p>
</div>
 
<canvas id="canvas"></canvas>
 
<a class="youtube-link" href="link" target="_blank">Animated Clouds Effect</a>
 
<script type="text/javascript">
 
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
 
let w, h, balls = [];
let mouse = {
    x: undefined,
    y: undefined
}
let rgb = [
    [26, 188, 156],
    [46, 204, 113],
    [52, 152, 219],
    [155, 89, 182],
    [241, 196, 15],
    [230, 126, 34],
    [231, 76, 60]
]
 
function init() {
    resizeReset();
    animationLoop();
}
 
function resizeReset() {
    w = canvas.width = window.innerWidth;
    h = canvas.height = window.innerHeight;
}
 
function animationLoop() {
    ctx.clearRect(0, 0, w, h);
    if (mouse.x !== undefined && mouse.y !== undefined) {
        balls.push(new Ball());
    }
    if (balls.length > 200) {
        balls = balls.slice(1);
    }
    drawBalls();
    requestAnimationFrame(animationLoop);
}
 
function drawBalls() {
    for (let i = 0; i < balls.length; i++) {
        balls[i].update();
        balls[i].draw();
    }
}
 
function mousemove(e) {
    mouse.x = e.x;
    mouse.y = e.y;
}
 
function mouseout() {
    mouse.x = undefined;
    mouse.y = undefined;
}
 
function getRandomInt(min, max) {
    return Math.round(Math.random() * (max - min)) + min;
}
 
class Ball {
    constructor() {
        this.x = mouse.x + getRandomInt(-20, 20);
        this.y = mouse.y + getRandomInt(-20, 20);
        this.size = getRandomInt(10, 20);
        this.rgb = rgb[getRandomInt(0, rgb.length - 1)];
        this.style = "rgba("+this.rgb[0]+","+this.rgb[1]+","+this.rgb[2]+",.5)";
    }
    draw() {
        ctx.fillStyle = this.style;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();
    }
    update() {
        if (this.size > 0) {
            let s = this.size - 0.3;
            this.size = (s <= 0) ? 0 : s;
        }
    }
}
 
window.addEventListener("DOMContentLoaded", init);
window.addEventListener("resize", resizeReset);
window.addEventListener("mousemove", mousemove);
window.addEventListener("mouseout", mouseout);
 
</script>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar