Anillos

Developer
Josep Antoni Bover Comas
Size
2,693 Kb
Views
22,264
  1. Anillos Previews
  2. Anillos HTML Codes
  3. Anillos JS Codes

How do I make an anillos?

What is a anillos? How do you make a anillos? This script and codes were developed by Josep Antoni Bover Comas on 27 August 2022, Saturday.

Anillos Previews
IQ Test

Anillos - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Anillos</title>
</head>
<body> <!-- Simplified object for 2D and THREE.js canvas (designed for my web page banners and for doing tests with them) -->
<!-- Can work in 2 ways, normal / test mode, and banner mode (for my web page headers) -->
<script src='https://devildrey33.es/Ejemplos/Utils/ObjetoCanvas.js'></script>
<link rel='stylesheet' href='https://devildrey33.es/Ejemplos/Utils/ObjetoCanvas.css'></link> <script src="js/index.js"></script>
</body>
</html>

Anillos - Script Codes JS Codes

/* Plantilla para crear banners animados en devildrey33.es */
var ObjetoCanvas_Depurar = false; // Si es true, no se parará la animación al perder el foco del teclado
// Constructor SIN TIPO, el tipo se especifica según la animación
var Anillos = function() { // Llamo al constructor del ObjetoBanner if (ObjetoCanvas.call(this, { 'Tipo' : '2d', 'Ancho' : 'Auto', 'Alto' : 'Auto', 'Entorno' : 'Normal', 'Idioma' : 'en', 'MostrarFPS' : true, 'ElementoRaiz' : document.body }) === false) { return false; } // Se ha creado el canvas, inicio los valores de la animación ... this.TotalCirculos = 350; this.Circulos = []; this.Circulo = function(Padre) { this.Padre = Padre; var CentroX = (this.Padre.Ancho / 2); this.CentroY = (this.Padre.Alto / 2); this.Angulo = Rand(360); this.Distancia = 15 + Rand(CentroX + 100); this.Tam = Rand(4, 1); this.Avance = (Rand(0.008, 0.0005) / 4) * this.Tam; // El avance es correlativo al tamaño para que no queden espacios en su estela this.X = CentroX + (this.Distancia * Math.cos(this.Angulo)); this.Y = (this.Padre.Alto / 2) + (this.Distancia * Math.sin(this.Angulo)); this.Color = "rgb(" + RandInt(255, 20) + "," + RandInt(255, 20) + "," + RandInt(255, 20) + ")"; this.Avanzar = function() { if (Padre.Invertir === false) { this.Angulo += this.Avance; } else { this.Angulo -= this.Avance * 1.5; } //if (this.Angulo > 360) this.Angulo -= 360; this.X = (this.Padre.Ancho / 2) +(this.Distancia * Math.cos(this.Angulo)); this.Y = (this.Padre.Alto / 2) + (this.Distancia * Math.sin(this.Angulo)); }; }; for (var i = 0; i < this.TotalCirculos; i++) { this.Circulos[i] = new this.Circulo(this); } this.Context.fillStyle = 'rgb(49, 46, 53)'; this.Context.fillRect(0, 0, this.Ancho, this.Alto); // Esconde la ventana que informa al usuario de que se está cargando la animación. (REQUERIDO) this.Cargando(false);
};
Anillos.prototype = Object.assign( Object.create(ObjetoCanvas.prototype) , { constructor : Anillos, Invertir : false, // Función que se llama al entrar con el mouse en el canvas MouseEnter : function(Evento) { this.Invertir = true; }, // Función que se llama al salir con el mouse del canvas MouseLeave : function(Evento) { this.Invertir = false; }, // Función que pinta cada frame de la animación Pintar : function() { this.Context.fillStyle = (this.Invertir === true) ? 'rgba(49, 46, 53, 0.02)' : 'rgba(49, 46, 53, 0.09)'; this.Context.fillRect(0, 0, this.Ancho, this.Alto); for (var i = 0; i < this.TotalCirculos; i++) { this.Circulos[i].Avanzar(); this.Context.beginPath(); this.Context.fillStyle = this.Circulos[i].Color; this.Context.arc(this.Circulos[i].X, this.Circulos[i].Y, this.Circulos[i].Tam, 0, 2 * Math.PI, false); this.Context.fill(); } }
});
var Canvas = null;
window.addEventListener('load', function() { Canvas = new Anillos; });
Anillos - Script Codes
Anillos - Script Codes
Home Page Home
Developer Josep Antoni Bover Comas
Username devildrey33
Uploaded August 27, 2022
Rating 3
Size 2,693 Kb
Views 22,264
Do you need developer help for Anillos?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Josep Antoni Bover Comas (devildrey33) Script Codes
Name
Hover transitions for buttons
Hex Tunnel 0.5
3D Rgb Spyral
Sinusoidal
3D Audio Analyzer 0.8
WormHole
Solitarie card game
2D Space
CSS menu concept
MultiCube
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!