```
diff --git a/files/es/web/api/animation/effect/index.md b/files/es/web/api/animation/effect/index.md
index 3ff9fdcc24bf9e..7456a52ab102e9 100644
--- a/files/es/web/api/animation/effect/index.md
+++ b/files/es/web/api/animation/effect/index.md
@@ -3,7 +3,7 @@ title: Animation.effect
slug: Web/API/Animation/effect
---
- {{ APIRef("Web Animations") }}
+{{ APIRef("Web Animations") }}
La propiedad `Animation.effect` de la [Web Animations API](/es/docs/Web/API/Web_Animations_API) obtiene y establece el efecto objetivo de una animación. El efecto objetivo puede ser un objeto efecto de un tipo basado en {{domxref("AnimationEffectReadOnly")}}, como {{domxref("KeyframeEffect")}}, o `null`.
diff --git a/files/es/web/api/animation/finish/index.md b/files/es/web/api/animation/finish/index.md
index 50fbea6898a619..8e05c31ba2156c 100644
--- a/files/es/web/api/animation/finish/index.md
+++ b/files/es/web/api/animation/finish/index.md
@@ -45,11 +45,9 @@ interfaceElement.addEventListener("mousedown", function() {
El siguiente ejemplo finaliza todas las animaciones en un solo elemento, independientemente de su dirección de reproducción.
```js
-elem.getAnimations().forEach(
- function(animation){
- return animation.finish();
- }
-);
+elem.getAnimations().forEach(function (animation) {
+ return animation.finish();
+});
```
## Especificaciones
diff --git a/files/es/web/api/animation/finish_event/index.md b/files/es/web/api/animation/finish_event/index.md
index 54785886a24dd4..0c99baf81efe14 100644
--- a/files/es/web/api/animation/finish_event/index.md
+++ b/files/es/web/api/animation/finish_event/index.md
@@ -41,8 +41,8 @@ hide(endingUI);
// Cuando los créditos se hayan desvanecido,
// volvemos a agregar los eventos de puntero cuando terminen.
-bringUI.onfinish = function() {
- endingUI.style.pointerEvents = 'auto';
+bringUI.onfinish = function () {
+ endingUI.style.pointerEvents = "auto";
};
```
diff --git a/files/es/web/api/animation/finished/index.md b/files/es/web/api/animation/finished/index.md
index 337aaf1d773b42..7ed39acc4b4176 100644
--- a/files/es/web/api/animation/finished/index.md
+++ b/files/es/web/api/animation/finished/index.md
@@ -26,16 +26,12 @@ El siguiente código espera a que todas las animaciones que se ejecutan en el el
```js
Promise.all(
- elem.getAnimations().map(
- function(animation) {
- return animation.finished
- }
- )
-).then(
- function() {
- return elem.remove();
- }
-);
+ elem.getAnimations().map(function (animation) {
+ return animation.finished;
+ }),
+).then(function () {
+ return elem.remove();
+});
```
## Especificaciones
diff --git a/files/es/web/api/animation/pause/index.md b/files/es/web/api/animation/pause/index.md
index fd53f5faa17215..badba2147c1eeb 100644
--- a/files/es/web/api/animation/pause/index.md
+++ b/files/es/web/api/animation/pause/index.md
@@ -34,15 +34,16 @@ Lanza un `InvalidStateError` si el {{domxref("Animation.currentTime", "currentTi
```js
// animación de la magdalena que lentamente se está comiendo
-var nommingCake = document.getElementById('eat-me_sprite').animate(
-[
- { transform: 'translateY(0)' },
- { transform: 'translateY(-80%)' }
-], {
- fill: 'forwards',
- easing: 'steps(4, end)',
- duration: aliceChange.effect.timing.duration / 2
-});
+var nommingCake = document
+ .getElementById("eat-me_sprite")
+ .animate(
+ [{ transform: "translateY(0)" }, { transform: "translateY(-80%)" }],
+ {
+ fill: "forwards",
+ easing: "steps(4, end)",
+ duration: aliceChange.effect.timing.duration / 2,
+ },
+ );
// realmente solo debe funcionar al hacer click, así que se pausa inicialmente:
nommingCake.pause();
@@ -52,7 +53,7 @@ Adicionalmente, al restablecer:
```js
// Una función multiusos para pausar las animaciones de Alicia, el pastelito y la botella que dice "drink me."
-var stopPlayingAlice = function() {
+var stopPlayingAlice = function () {
aliceChange.pause();
nommingCake.pause();
drinking.pause();
diff --git a/files/es/web/api/animation/play/index.md b/files/es/web/api/animation/play/index.md
index 34c034c612ee60..eb288c575ed3e0 100644
--- a/files/es/web/api/animation/play/index.md
+++ b/files/es/web/api/animation/play/index.md
@@ -27,29 +27,28 @@ En el ejemplo [Growing/Shrinking Alice Game](https://codepen.io/rachelnabors/pen
```js
// El pastel tiene su propia animación:
-var nommingCake = document.getElementById('eat-me_sprite').animate(
-[
- { transform: 'translateY(0)' },
- { transform: 'translateY(-80%)' }
-], {
- fill: 'forwards',
- easing: 'steps(4, end)',
- duration: aliceChange.effect.timing.duration / 2
-});
+var nommingCake = document
+ .getElementById("eat-me_sprite")
+ .animate(
+ [{ transform: "translateY(0)" }, { transform: "translateY(-80%)" }],
+ {
+ fill: "forwards",
+ easing: "steps(4, end)",
+ duration: aliceChange.effect.timing.duration / 2,
+ },
+ );
// Pausa la animación del pastel para que no se reproduzca inmediatamente.
nommingCake.pause();
// Esta función se reproducirá cuando el usuario haga click o toque
-var growAlice = function() {
-
+var growAlice = function () {
// Reproduce la animación de Alicia.
aliceChange.play();
// Reproduce la animación del pastel.
nommingCake.play();
-
-}
+};
// Cuando el usuario hace click o toca, llama a growAlice, para reproducir todas las animaciones.
cake.addEventListener("mousedown", growAlice, false);
diff --git a/files/es/web/api/animation/playbackrate/index.md b/files/es/web/api/animation/playbackrate/index.md
index 9ce4edf46282f9..fd11db36150dcd 100644
--- a/files/es/web/api/animation/playbackrate/index.md
+++ b/files/es/web/api/animation/playbackrate/index.md
@@ -28,10 +28,10 @@ Toma un número que puede ser 0, negativo o positivo. Los valores negativos invi
En el ejemplo [Growing/Shrinking Alice Game](https://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010) , hacer click o tocar la botella, hace que la animación de crecimiento de Alicia (`aliceChange`) se invierta para reducirse:
```js
-var shrinkAlice = function() {
+var shrinkAlice = function () {
aliceChange.playbackRate = -1;
aliceChange.play();
-}
+};
// Con un toque o un click, Alicia se encogerá.
bottle.addEventListener("mousedown", shrinkAlice, false);
@@ -41,10 +41,10 @@ bottle.addEventListener("touchstart", shrinkAlice, false);
Por el contrario, hacer click en el pastel hace que "crezca" reproduciendo `aliceChange` hacia adelante otra vez:
```js
-var growAlice = function() {
+var growAlice = function () {
aliceChange.playbackRate = 1;
aliceChange.play();
-}
+};
// Con un toque o un click, Alicia crecerá.
cake.addEventListener("mousedown", growAlice, false);
@@ -54,23 +54,21 @@ cake.addEventListener("touchstart", growAlice, false);
En otro ejemplo, [Red Queen's Race Game](https://codepen.io/rachelnabors/pen/PNGGaV?editors=0010), Alicia y La Reina Roja están ralentizandose constantemente:
```js
-setInterval( function() {
-
+setInterval(function () {
// Asegúrate de que la velocidad de reproducción nunca descienda por debajo de .4
- if (redQueen_alice.playbackRate > .4) {
- redQueen_alice.playbackRate *= .9;
+ if (redQueen_alice.playbackRate > 0.4) {
+ redQueen_alice.playbackRate *= 0.9;
}
-
}, 3000);
```
Pero hacer click o hacer tapping(pasar el puntero) sobre ellos hace que aceleren multiplicando su `playbackRate` (velocidad de reproducción):
```js
-var goFaster = function() {
+var goFaster = function () {
redQueen_alice.playbackRate *= 1.1;
-}
+};
document.addEventListener("click", goFaster);
document.addEventListener("touchstart", goFaster);
diff --git a/files/es/web/api/animation/playstate/index.md b/files/es/web/api/animation/playstate/index.md
index b556c5a24d39a6..3ffb4bf6daddc9 100644
--- a/files/es/web/api/animation/playstate/index.md
+++ b/files/es/web/api/animation/playstate/index.md
@@ -37,29 +37,25 @@ En el ejemplo [Growing/Shrinking Alice Game](https://codepen.io/rachelnabors/pen
```js
// Configurando las animaciones de lágrimas
-tears.forEach(function(el) {
- el.animate(
- tearsFalling,
- {
- delay: getRandomMsRange(-1000, 1000), // cada lágrima aleatoria
- duration: getRandomMsRange(2000, 6000), // cada lágrima aleatoria
- iterations: Infinity,
- easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
- });
- el.playState = 'paused';
+tears.forEach(function (el) {
+ el.animate(tearsFalling, {
+ delay: getRandomMsRange(-1000, 1000), // cada lágrima aleatoria
+ duration: getRandomMsRange(2000, 6000), // cada lágrima aleatoria
+ iterations: Infinity,
+ easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)",
+ });
+ el.playState = "paused";
});
-
// Reproduce las lágrimas cayendo cuando el final necesita mostrarlas.
-tears.forEach(function(el) {
- el.playState = 'playing';
+tears.forEach(function (el) {
+ el.playState = "playing";
});
-
// Reinicia la animación de las lágrimas y la detiene.
-tears.forEach(function(el) {
+tears.forEach(function (el) {
el.playState = "paused";
el.currentTime = 0;
});
diff --git a/files/es/web/api/animation/ready/index.md b/files/es/web/api/animation/ready/index.md
index 534195537c0afe..af8d1a20e9b590 100644
--- a/files/es/web/api/animation/ready/index.md
+++ b/files/es/web/api/animation/ready/index.md
@@ -20,7 +20,7 @@ var readyPromise = Animation.ready;
Un {{jsxref("Promise")}} que se resuelve cuando la animación esta lista para reproducirse. Por lo general, se usará una construcción similar a esta usando una promise lista:
```js
-animation.ready.then(function() {
+animation.ready.then(function () {
// Hace lo que sea necesario cuando
// la animación está lista para reproducirse
});
@@ -32,7 +32,7 @@ En el siguiente ejemplo, el estado de la animación será `running(reproduciendo
```js
animation.pause();
-animation.ready.then(function() {
+animation.ready.then(function () {
// Displays 'running'
alert(animation.playState);
});
diff --git a/files/es/web/api/animation/reverse/index.md b/files/es/web/api/animation/reverse/index.md
index 049c2cb8d9b517..17fd1d00adc3b4 100644
--- a/files/es/web/api/animation/reverse/index.md
+++ b/files/es/web/api/animation/reverse/index.md
@@ -26,26 +26,26 @@ Ningun.
En el ejemplo [Growing/Shrinking Alice Game](https://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010) , hacer click o tocar la botella, hace que la animación de crecimiento de Alicia(`aliceChange`) sea reproducida al revés, lo que la hace más pequeña. Esto se hace estableciendo el {{ domxref("Animation.playbackRate") }} de `aliceChange` en `-1` de esta forma:
```js
-var shrinkAlice = function() {
+var shrinkAlice = function () {
// reproduce la animación de Alicia al revés.
aliceChange.playbackRate = -1;
aliceChange.play();
// reproduce la animación de la botella.
- drinking.play()
-}
+ drinking.play();
+};
```
Pero también se podría haber hecho lamando a `reverse()` en `aliceChange` así:
```js
-var shrinkAlice = function() {
+var shrinkAlice = function () {
// reproduce la animación de Alicia al revés.
aliceChange.reverse();
// reproduce la animación de la botella.
- drinking.play()
-}
+ drinking.play();
+};
```
## Especificaciones
diff --git a/files/es/web/api/animation/starttime/index.md b/files/es/web/api/animation/starttime/index.md
index d0d1f9f03872ae..41c692aebd66c4 100644
--- a/files/es/web/api/animation/starttime/index.md
+++ b/files/es/web/api/animation/starttime/index.md
@@ -26,10 +26,12 @@ Un número de punto flotante que representa el tiempo actual en milisegundos, o
En el ejemplo [Running on Web Animations API example](https://codepen.io/rachelnabors/pen/zxYexJ?editors=0010), podemos sincronizar todos los nuevos gatos animados dándoles el mismo tiempo de inicio `startTime` que el gato original:
```js
-var catRunning = document.getElementById ("withWAAPI").animate(keyframes, timing);
+var catRunning = document
+ .getElementById("withWAAPI")
+ .animate(keyframes, timing);
/* Una función que crea nuevos gatos. */
-function addCat(){
+function addCat() {
var newCat = document.createElement("div");
newCat.classList.add("cat");
return newCat;
diff --git a/files/es/web/api/atob/index.md b/files/es/web/api/atob/index.md
index 2a71f25b99871e..b67886beff0749 100644
--- a/files/es/web/api/atob/index.md
+++ b/files/es/web/api/atob/index.md
@@ -3,6 +3,7 @@ title: WindowBase64.atob()
slug: Web/API/atob
original_slug: Web/API/WindowOrWorkerGlobalScope/atob
---
+
{{APIRef}}
La función **WindowBase64.atob()** descodifica una cadena de datos que ha sido codificada utilizando la codificación en base-64. Puedes utilizar el método {{domxref("window.btoa()")}} para codificar y transmitir datos que, de otro modo podrían generar problemas de comunicación. Luego de ser transmitidos se puede usar el método window\.atob() para decodificar los datos de nuevo. Por ejemplo, puedes codificar, transmitir y decodificar los caracteres de control como valores ASCII 0 a 31.
diff --git a/files/es/web/api/audiobuffer/index.md b/files/es/web/api/audiobuffer/index.md
index afb0f7872f4eef..8a545a8864ccb9 100644
--- a/files/es/web/api/audiobuffer/index.md
+++ b/files/es/web/api/audiobuffer/index.md
@@ -42,7 +42,11 @@ El siguiente ejemplo muestra como se crea un `AudioBuffer` y rellena con un soni
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
// Create an empty three-second stereo buffer at the sample rate of the AudioContext
-var myArrayBuffer = audioCtx.createBuffer(2, audioCtx.sampleRate * 3, audioCtx.sampleRate);
+var myArrayBuffer = audioCtx.createBuffer(
+ 2,
+ audioCtx.sampleRate * 3,
+ audioCtx.sampleRate,
+);
// Fill the buffer with white noise;
// just random values between -1.0 and 1.0
diff --git a/files/es/web/api/battery_status_api/index.md b/files/es/web/api/battery_status_api/index.md
index 1d5c38e42bf04e..128b01a7a8ba5e 100644
--- a/files/es/web/api/battery_status_api/index.md
+++ b/files/es/web/api/battery_status_api/index.md
@@ -22,8 +22,8 @@ La **API de Estado de Batería**, también conocida como "**Battery API**", prov
En este ejemplo, observamos los cambios en el estado de la carga (este o no conectado y cargando) y en el nivel de la batería. Esto se hace escuchando los eventos [`chargingchange`](/es/docs/Web/Reference/Events/chargingchange), [`levelchange`](/es/docs/Web/Reference/Events/levelchange), [`chargingtimechange`](/es/docs/Web/Reference/Events/chargingtimechange) y [`dischargingtimechange`](/es/docs/Web/Reference/Events/dischargingtimechange).
```js
-navigator.getBattery().then(function(battery) {
- function updateAllBatteryInfo(){
+navigator.getBattery().then(function (battery) {
+ function updateAllBatteryInfo() {
updateChargeInfo();
updateLevelInfo();
updateChargingInfo();
@@ -31,38 +31,41 @@ navigator.getBattery().then(function(battery) {
}
updateAllBatteryInfo();
- battery.addEventListener('chargingchange', function(){
+ battery.addEventListener("chargingchange", function () {
updateChargeInfo();
});
- function updateChargeInfo(){
- console.log("La batería esta cargando? "
- + (battery.charging ? "Si" : "No"));
+ function updateChargeInfo() {
+ console.log(
+ "La batería esta cargando? " + (battery.charging ? "Si" : "No"),
+ );
}
- battery.addEventListener('levelchange', function(){
+ battery.addEventListener("levelchange", function () {
updateLevelInfo();
});
- function updateLevelInfo(){
- console.log("Nivel de la batería: "
- + battery.level * 100 + "%");
+ function updateLevelInfo() {
+ console.log("Nivel de la batería: " + battery.level * 100 + "%");
}
- battery.addEventListener('chargingtimechange', function(){
+ battery.addEventListener("chargingtimechange", function () {
updateChargingInfo();
});
- function updateChargingInfo(){
- console.log("Tiempo de carga de la batería: "
- + battery.chargingTime + " segundos");
+ function updateChargingInfo() {
+ console.log(
+ "Tiempo de carga de la batería: " + battery.chargingTime + " segundos",
+ );
}
- battery.addEventListener('dischargingtimechange', function(){
+ battery.addEventListener("dischargingtimechange", function () {
updateDischargingInfo();
});
- function updateDischargingInfo(){
- console.log("Tiempo de descarga de la batería: "
- + battery.dischargingTime + " segundos");
+ function updateDischargingInfo() {
+ console.log(
+ "Tiempo de descarga de la batería: " +
+ battery.dischargingTime +
+ " segundos",
+ );
}
-
});
```
diff --git a/files/es/web/api/batterymanager/charging/index.md b/files/es/web/api/batterymanager/charging/index.md
index 2a3f20aad3b879..d293efe92170e8 100644
--- a/files/es/web/api/batterymanager/charging/index.md
+++ b/files/es/web/api/batterymanager/charging/index.md
@@ -10,7 +10,7 @@ Un valor boleano indicando si está cargando o no la batería del dispositivo (e
## Sintaxis
```js
-var cargando = battery.charging
+var cargando = battery.charging;
```
El valor de retorno, `cargando` indica si la `battery` se está cargando o no, el cual es un objeto {{domxref("BatteryManager")}}, está actualmente cargandose, si la batería se está cargando, este valor es `true`. De lo contrario el valor es `false`.
@@ -26,11 +26,10 @@ El valor de retorno, `cargando` indica si la `battery` se está cargando o no, e
### Contenido JavaScript
```js
-navigator.getBattery().then(function(battery) {
+navigator.getBattery().then(function (battery) {
+ var cargando = battery.charging;
- var cargando = battery.charging;
-
- document.querySelector('#cargando').textContent = cargando;
+ document.querySelector("#cargando").textContent = cargando;
});
```
diff --git a/files/es/web/api/batterymanager/chargingchange_event/index.md b/files/es/web/api/batterymanager/chargingchange_event/index.md
index 61cb1011eaca5c..c866cd262469c3 100644
--- a/files/es/web/api/batterymanager/chargingchange_event/index.md
+++ b/files/es/web/api/batterymanager/chargingchange_event/index.md
@@ -13,7 +13,7 @@ Especifica un evento que escucha para recibir eventos [`chargingchange`](/es/doc
## Sintaxis
```js
-battery.onchargingchange = funcRef
+battery.onchargingchange = funcRef;
```
Donde `battery` es un objeto {{domxref("BatteryManager")}}, y `funcRef` es una función para llamar cuando se produce el evento [`chargingchange`](/es/docs/Web/Reference/Events/chargingchange).
@@ -30,14 +30,13 @@ Donde `battery` es un objeto {{domxref("BatteryManager")}}, y `funcRef` es una f
### Contenido JavaScript
```js
-navigator.getBattery().then(function(battery) {
+navigator.getBattery().then(function (battery) {
+ battery.onchargingchange = chargingChange();
- battery.onchargingchange = chargingChange();
-
- function chargingChange() {
- document.querySelector('#level').textContent = battery.level;
- document.querySelector('#chargingTime').textContent = battery.chargingTime;
- }
+ function chargingChange() {
+ document.querySelector("#level").textContent = battery.level;
+ document.querySelector("#chargingTime").textContent = battery.chargingTime;
+ }
});
```
diff --git a/files/es/web/api/batterymanager/chargingtime/index.md b/files/es/web/api/batterymanager/chargingtime/index.md
index 3e754fcc80952b..2ebe80aa91c124 100644
--- a/files/es/web/api/batterymanager/chargingtime/index.md
+++ b/files/es/web/api/batterymanager/chargingtime/index.md
@@ -32,7 +32,7 @@ Si la batería está descargándose el valor es [`Infinity`](/es/docs/Web/JavaSc
### Contenido JavaScript
```js
-navigator.getBattery().then(function(battery) {
+navigator.getBattery().then(function (battery) {
var time = battery.chargingTime;
document.querySelector("#chargingTime").textContent = battery.chargingTime;
diff --git a/files/es/web/api/batterymanager/dischargingtime/index.md b/files/es/web/api/batterymanager/dischargingtime/index.md
index d9e58e14266688..25863d6f6ddd26 100644
--- a/files/es/web/api/batterymanager/dischargingtime/index.md
+++ b/files/es/web/api/batterymanager/dischargingtime/index.md
@@ -34,10 +34,11 @@ o si el sistema es incapaz de calcular el tiempo de descarga.
### Contenido JavaScript
```js
-navigator.getBattery().then(function(battery) {
+navigator.getBattery().then(function (battery) {
var time = battery.dischargingTime;
- document.querySelector("#dischargingTime").textContent = battery.dischargingTime;
+ document.querySelector("#dischargingTime").textContent =
+ battery.dischargingTime;
});
```
diff --git a/files/es/web/api/batterymanager/level/index.md b/files/es/web/api/batterymanager/level/index.md
index f5a24fded90849..5163b1b7b75d6a 100644
--- a/files/es/web/api/batterymanager/level/index.md
+++ b/files/es/web/api/batterymanager/level/index.md
@@ -30,19 +30,18 @@ Un número.
#### JavaScript
```js
-const getLevel = document.querySelector('#get-level');
-const output = document.querySelector('#output');
+const getLevel = document.querySelector("#get-level");
+const output = document.querySelector("#output");
-getLevel.addEventListener('click', async () => {
+getLevel.addEventListener("click", async () => {
if (!navigator.getBattery) {
- output.textContent = 'El administrador de batería no es compatible';
+ output.textContent = "El administrador de batería no es compatible";
} else {
const manager = await navigator.getBattery();
const level = manager.level;
output.textContent = `Battery level: ${level}`;
}
});
-
```
#### Resultado
diff --git a/files/es/web/api/batterymanager/levelchange_event/index.md b/files/es/web/api/batterymanager/levelchange_event/index.md
index 1d965760137666..3e850892d4991a 100644
--- a/files/es/web/api/batterymanager/levelchange_event/index.md
+++ b/files/es/web/api/batterymanager/levelchange_event/index.md
@@ -31,17 +31,16 @@ y `funcRef` es una función que se convoca cuando el evento de [`levelchange`](/
### Contenido JavaScript
```js
-navigator.getBattery().then(function(battery) {
- battery.onlevelchange = function(){
- document.querySelector('#level').textContent = battery.level;
-
- if(battery.charging) {
- document.querySelector('#stateBattery').textContent =
- "Charging time: " + (battery.chargingTime / 60);
- }
- else {
- document.querySelector('#stateBattery').textContent =
- "Discharging time: " + (battery.dischargingTime / 60);
+navigator.getBattery().then(function (battery) {
+ battery.onlevelchange = function () {
+ document.querySelector("#level").textContent = battery.level;
+
+ if (battery.charging) {
+ document.querySelector("#stateBattery").textContent =
+ "Charging time: " + battery.chargingTime / 60;
+ } else {
+ document.querySelector("#stateBattery").textContent =
+ "Discharging time: " + battery.dischargingTime / 60;
}
};
});
diff --git a/files/es/web/api/beforeunloadevent/index.md b/files/es/web/api/beforeunloadevent/index.md
index c73dbcd156b276..7ad68c7e0bae04 100644
--- a/files/es/web/api/beforeunloadevent/index.md
+++ b/files/es/web/api/beforeunloadevent/index.md
@@ -33,12 +33,12 @@ Cuando una cadena no vacía es asignada a la propiedad `returnValue` del Evento,
## Ejemplos
```js
-window.addEventListener("beforeunload", function( event ) {
- event.returnValue = "\o/";
+window.addEventListener("beforeunload", function (event) {
+ event.returnValue = "\\o/";
});
//is equivalent to
-window.addEventListener("beforeunload", function( event ) {
+window.addEventListener("beforeunload", function (event) {
event.preventDefault();
});
```
@@ -47,10 +47,10 @@ Los navegadores basado en Webkit no se basan en las especificaciones del cuadro
```js
window.addEventListener("beforeunload", function (e) {
- var confirmationMessage = "\o/";
+ var confirmationMessage = "\\o/";
- (e || window.event).returnValue = confirmationMessage; //Gecko + IE
- return confirmationMessage; //Webkit, Safari, Chrome etc.
+ (e || window.event).returnValue = confirmationMessage; //Gecko + IE
+ return confirmationMessage; //Webkit, Safari, Chrome etc.
});
```
diff --git a/files/es/web/api/blob/blob/index.md b/files/es/web/api/blob/blob/index.md
index 419a83d29df839..476dc108501136 100644
--- a/files/es/web/api/blob/blob/index.md
+++ b/files/es/web/api/blob/blob/index.md
@@ -34,7 +34,7 @@ Un nuevo objeto {{domxref("Blob")}} conteniendo la información especificada.
```js
var unaParteDeArchivo = ['hey!']; // un array de un solo DOMString
-var oMiBlob = new Blob(unaParteDeArchivo, {type : 'text/html'}); // el blob
+var oMiBlob = new Blob(unaParteDeArchivo, { type: "text/html" }); // el blob
```
## Especificaciones
diff --git a/files/es/web/api/blob/index.md b/files/es/web/api/blob/index.md
index 340d6f4b70a21a..84a7010052b0f5 100644
--- a/files/es/web/api/blob/index.md
+++ b/files/es/web/api/blob/index.md
@@ -38,7 +38,7 @@ El siguiente código:
```js
var aFileParts = ['hey!'];
-var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob
+var oMyBlob = new Blob(aFileParts, { type: "text/html" }); // the blob
```
es equivalente a:
@@ -47,7 +47,7 @@ es equivalente a:
var oBuilder = new BlobBuilder();
var aFileParts = ['hey!'];
oBuilder.append(aFileParts[0]);
-var oMyBlob = oBuilder.getBlob('text/xml'); // the blob
+var oMyBlob = oBuilder.getBlob("text/xml"); // the blob
```
> **Advertencia:** La interfaz {{ domxref("BlobBuilder") }} ofrece otra manera de crear `Blob`, pero se encuentra ahora obsoleta y no debería volverse a utilizar.
@@ -58,7 +58,7 @@ El siguiente código:
```js
var typedArray = GetTheTypedArraySomehow();
-var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // pass a useful mime type here
+var blob = new Blob([typedArray], { type: "application/octet-binary" }); // pass a useful mime type here
var url = URL.createObjectURL(blob);
// url will be something like: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
// now you can use the url in any context that regular URLs can be used in, for example img.src, etc.
@@ -70,8 +70,8 @@ La única manera de leer contenido de un Blob es utilizando un {{domxref("FileRe
```js
var reader = new FileReader();
-reader.addEventListener("loadend", function() {
- // reader.result contains the contents of blob as a typed array
+reader.addEventListener("loadend", function () {
+ // reader.result contains the contents of blob as a typed array
});
reader.readAsArrayBuffer(blob);
```
diff --git a/files/es/web/api/caches/index.md b/files/es/web/api/caches/index.md
index ab14933e192557..38471aef5bc51a 100644
--- a/files/es/web/api/caches/index.md
+++ b/files/es/web/api/caches/index.md
@@ -23,22 +23,22 @@ Un objeto {{domxref("CacheStorage")}}.
El siguiente ejemplo muestra la forma en la que utilizarías una cache en un contexto de [service worker](/es/docs/Web/API/Service_Worker_API) para guardar assets _offline_.
```js
-this.addEventListener('install', function(event) {
+this.addEventListener("install", function (event) {
event.waitUntil(
- caches.open('v1').then(function(cache) {
+ caches.open("v1").then(function (cache) {
return cache.addAll(
- '/sw-test/',
- '/sw-test/index.html',
- '/sw-test/style.css',
- '/sw-test/app.js',
- '/sw-test/image-list.js',
- '/sw-test/star-wars-logo.jpg',
- '/sw-test/gallery/',
- '/sw-test/gallery/bountyHunters.jpg',
- '/sw-test/gallery/myLittleVader.jpg',
- '/sw-test/gallery/snowTroopers.jpg'
+ "/sw-test/",
+ "/sw-test/index.html",
+ "/sw-test/style.css",
+ "/sw-test/app.js",
+ "/sw-test/image-list.js",
+ "/sw-test/star-wars-logo.jpg",
+ "/sw-test/gallery/",
+ "/sw-test/gallery/bountyHunters.jpg",
+ "/sw-test/gallery/myLittleVader.jpg",
+ "/sw-test/gallery/snowTroopers.jpg",
);
- })
+ }),
);
});
```
diff --git a/files/es/web/api/cachestorage/index.md b/files/es/web/api/cachestorage/index.md
index f4edb0575f3f01..64714303057b15 100644
--- a/files/es/web/api/cachestorage/index.md
+++ b/files/es/web/api/cachestorage/index.md
@@ -51,46 +51,50 @@ In the second code block, we wait for a {{domxref("FetchEvent")}} to fire. We co
Finally, return whatever the custom response ended up being equal to, using {{domxref("FetchEvent.respondWith")}}.
```js
-self.addEventListener('install', function(event) {
+self.addEventListener("install", function (event) {
event.waitUntil(
- caches.open('v1').then(function(cache) {
+ caches.open("v1").then(function (cache) {
return cache.addAll([
- '/sw-test/',
- '/sw-test/index.html',
- '/sw-test/style.css',
- '/sw-test/app.js',
- '/sw-test/image-list.js',
- '/sw-test/star-wars-logo.jpg',
- '/sw-test/gallery/bountyHunters.jpg',
- '/sw-test/gallery/myLittleVader.jpg',
- '/sw-test/gallery/snowTroopers.jpg'
+ "/sw-test/",
+ "/sw-test/index.html",
+ "/sw-test/style.css",
+ "/sw-test/app.js",
+ "/sw-test/image-list.js",
+ "/sw-test/star-wars-logo.jpg",
+ "/sw-test/gallery/bountyHunters.jpg",
+ "/sw-test/gallery/myLittleVader.jpg",
+ "/sw-test/gallery/snowTroopers.jpg",
]);
- })
+ }),
);
});
-self.addEventListener('fetch', function(event) {
- event.respondWith(caches.match(event.request).then(function(response) {
- // caches.match() always resolves
- // but in case of success response will have value
- if (response !== undefined) {
- return response;
- } else {
- return fetch(event.request).then(function (response) {
- // response may be used only once
- // we need to save clone to put one copy in cache
- // and serve second one
- let responseClone = response.clone();
-
- caches.open('v1').then(function (cache) {
- cache.put(event.request, responseClone);
- });
+self.addEventListener("fetch", function (event) {
+ event.respondWith(
+ caches.match(event.request).then(function (response) {
+ // caches.match() always resolves
+ // but in case of success response will have value
+ if (response !== undefined) {
return response;
- }).catch(function () {
- return caches.match('/sw-test/gallery/myLittleVader.jpg');
- });
- }
- }));
+ } else {
+ return fetch(event.request)
+ .then(function (response) {
+ // response may be used only once
+ // we need to save clone to put one copy in cache
+ // and serve second one
+ let responseClone = response.clone();
+
+ caches.open("v1").then(function (cache) {
+ cache.put(event.request, responseClone);
+ });
+ return response;
+ })
+ .catch(function () {
+ return caches.match("/sw-test/gallery/myLittleVader.jpg");
+ });
+ }
+ }),
+ );
});
```
@@ -99,58 +103,58 @@ This snippet shows how the API can be used outside of a service worker context,
```js
// Try to get data from the cache, but fall back to fetching it live.
async function getData() {
- const cacheVersion = 1;
- const cacheName = `myapp-${ cacheVersion }`;
- const url = 'https://jsonplaceholder.typicode.com/todos/1';
- let cachedData = await getCachedData( cacheName, url );
+ const cacheVersion = 1;
+ const cacheName = `myapp-${cacheVersion}`;
+ const url = "https://jsonplaceholder.typicode.com/todos/1";
+ let cachedData = await getCachedData(cacheName, url);
- if ( cachedData ) {
- console.log( 'Retrieved cached data' );
- return cachedData;
- }
+ if (cachedData) {
+ console.log("Retrieved cached data");
+ return cachedData;
+ }
- console.log( 'Fetching fresh data' );
+ console.log("Fetching fresh data");
- const cacheStorage = await caches.open( cacheName );
- await cacheStorage.add( url );
- cachedData = await getCachedData( cacheName, url );
- await deleteOldCaches( cacheName );
+ const cacheStorage = await caches.open(cacheName);
+ await cacheStorage.add(url);
+ cachedData = await getCachedData(cacheName, url);
+ await deleteOldCaches(cacheName);
- return cachedData;
+ return cachedData;
}
// Get data from the cache.
-async function getCachedData( cacheName, url ) {
- const cacheStorage = await caches.open( cacheName );
- const cachedResponse = await cacheStorage.match( url );
+async function getCachedData(cacheName, url) {
+ const cacheStorage = await caches.open(cacheName);
+ const cachedResponse = await cacheStorage.match(url);
- if ( ! cachedResponse || ! cachedResponse.ok ) {
- return false;
- }
+ if (!cachedResponse || !cachedResponse.ok) {
+ return false;
+ }
- return await cachedResponse.json();
+ return await cachedResponse.json();
}
// Delete any old caches to respect user's disk space.
-async function deleteOldCaches( currentCache ) {
- const keys = await caches.keys();
+async function deleteOldCaches(currentCache) {
+ const keys = await caches.keys();
- for ( const key of keys ) {
- const isOurCache = 'myapp-' === key.substr( 0, 6 );
+ for (const key of keys) {
+ const isOurCache = "myapp-" === key.substr(0, 6);
- if ( currentCache === key || ! isOurCache ) {
- continue;
- }
+ if (currentCache === key || !isOurCache) {
+ continue;
+ }
- caches.delete( key );
- }
+ caches.delete(key);
+ }
}
try {
- const data = await getData();
- console.log( { data } );
-} catch ( error ) {
- console.error( { error } );
+ const data = await getData();
+ console.log({ data });
+} catch (error) {
+ console.error({ error });
}
```
diff --git a/files/es/web/api/cachestorage/open/index.md b/files/es/web/api/cachestorage/open/index.md
index 7eaadf22f0948d..4b1918d325e735 100644
--- a/files/es/web/api/cachestorage/open/index.md
+++ b/files/es/web/api/cachestorage/open/index.md
@@ -31,7 +31,7 @@ Una {{jsxref("Promise")}} que se resuelve en el objeto {{domxref("Cache")}} soli
## Ejemplos
-Este ejemplo es de MDN [ejemplo de *service worker* simple](https://github.com/mdn/dom-examples/tree/main/service-worker/simple-service-worker) (ve el [*service worker* simple ejecutándose en vivo](https://bncb2v.csb.app/)).
+Este ejemplo es de MDN [ejemplo de _service worker_ simple](https://github.com/mdn/dom-examples/tree/main/service-worker/simple-service-worker) (ve el [_service worker_ simple ejecutándose en vivo](https://bncb2v.csb.app/)).
Aquí esperamos a que se active un {{domxref("InstallEvent")}}, luego se ejecuta
{{domxref("ExtendableEvent.waitUntil","waitUntil()")}} para gestionar el proceso de instalación de
la aplicación. Esto consiste en llamar a `CacheStorage.open()` para crear una nueva
@@ -53,8 +53,8 @@ self.addEventListener("install", (event) => {
"/gallery/bountyHunters.jpg",
"/gallery/myLittleVader.jpg",
"/gallery/snowTroopers.jpg",
- ])
- )
+ ]),
+ ),
);
});
```
@@ -69,6 +69,6 @@ self.addEventListener("install", (event) => {
## Véase también
-- [Usar *Service Workers*](/es/docs/Web/API/Service_Worker_API/Using_Service_Workers)
+- [Usar _Service Workers_](/es/docs/Web/API/Service_Worker_API/Using_Service_Workers)
- {{domxref("Cache")}}
- {{domxref("caches")}}
diff --git a/files/es/web/api/canvas_api/index.md b/files/es/web/api/canvas_api/index.md
index 5d74f0cbc75f1c..3bdc45a392c71f 100644
--- a/files/es/web/api/canvas_api/index.md
+++ b/files/es/web/api/canvas_api/index.md
@@ -25,10 +25,10 @@ Esto es un trozo de código que usa el método {{domxref("CanvasRenderingContext
### JavaScript
```js
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
-ctx.fillStyle = 'green';
+ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);
```
@@ -42,15 +42,16 @@ Edita este código para ver tus cambios en tiempo real en este canvas:
+ctx.fillRect(10, 10, 100, 100);
```
```js hidden
-var canvas = document.getElementById('canvas');
+var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
-var textarea = document.getElementById('code');
-var reset = document.getElementById('reset');
-var edit = document.getElementById('edit');
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
var code = textarea.value;
function drawCanvas() {
@@ -58,17 +59,17 @@ function drawCanvas() {
eval(textarea.value);
}
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
textarea.value = code;
drawCanvas();
});
-edit.addEventListener('click', function() {
+edit.addEventListener("click", function () {
textarea.focus();
-})
+});
-textarea.addEventListener('input', drawCanvas);
-window.addEventListener('load', drawCanvas);
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
```
{{ EmbedLiveSample('Código_editable', 700, 360) }}
diff --git a/files/es/web/api/canvas_api/manipulating_video_using_canvas/index.md b/files/es/web/api/canvas_api/manipulating_video_using_canvas/index.md
index 2ef534795b842e..ac8d441fe832ee 100644
--- a/files/es/web/api/canvas_api/manipulating_video_using_canvas/index.md
+++ b/files/es/web/api/canvas_api/manipulating_video_using_canvas/index.md
@@ -13,14 +13,13 @@ Al combinar las capacidades del elemento [`video`](/En/HTML/Element/Video) intro
El documento XHTML que se utiliza para representar este contenido se muestra a continuación.
```html
-
+
@@ -39,11 +38,11 @@ El documento XHTML que se utiliza para representar este contenido se muestra a c
-
+
-
-
+
+
@@ -53,9 +52,9 @@ Los puntos clave a tener en cuenta son:
1. Este documento establece dos elemento
- `canvas`
+ `canvas`
- , con los identificadores de `c1` y `c2` . Canvas `c1` se utiliza para mostrar la imagen actual del video original, mientras que `c2` se utiliza para mostrar el video después de realizar la manipulación con el efecto croma; `c2` se carga previamente con la imagen fija que se utilizará para sustituir el fondo verde en el video.
+ , con los identificadores de `c1` y `c2` . Canvas `c1` se utiliza para mostrar la imagen actual del video original, mientras que `c2` se utiliza para mostrar el video después de realizar la manipulación con el efecto croma; `c2` se carga previamente con la imagen fija que se utilizará para sustituir el fondo verde en el video.
2. El código JavaScript es importado de un script llamado `main.js` ; este script utiliza JavaScript 1.8 características, de modo que la versión se especifica en la línea 22 al importar la secuencia de comandos.
3. Cuando se carga el documento, se ejecuta el método `processor.doLoad()` de `main.js`.
diff --git a/files/es/web/api/canvas_api/tutorial/advanced_animations/index.md b/files/es/web/api/canvas_api/tutorial/advanced_animations/index.md
index 1ac3ad89541af3..460e2944696bdf 100644
--- a/files/es/web/api/canvas_api/tutorial/advanced_animations/index.md
+++ b/files/es/web/api/canvas_api/tutorial/advanced_animations/index.md
@@ -19,21 +19,21 @@ Vamos a usar una bola para nuestro estudio de la animación, entonces primero di
Como siempre, necesitamos un entorno para dibujar. Para dibujar la bola, creamos un contenido `ball` lo cual contiene propiedades y un método `draw()`.
```js
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
var ball = {
x: 100,
y: 100,
radius: 25,
- color: 'blue',
- draw: function() {
+ color: "blue",
+ draw: function () {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = this.color;
ctx.fill();
- }
+ },
};
ball.draw();
@@ -46,8 +46,8 @@ Nada especial aquí; la bola es en realidad un circulo sencillo y se dibuja con
Ya que tenemos una bola, estamos listos agregar una animación básica así como aprendimos en el [último capítulo](/es/docs/Web/API/Canvas_API/Tutorial/Basic_animations) de esta tutoría. De nuevo, {{domxref("window.requestAnimationFrame()")}} nos ayuda controlar la animación. La bola empieza moverse por agregar un vector de velocidad a la posición. Para cada fotograma, también {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} el canvas para quitar los circulos viejos de los fotogramas anteriores.
```js
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
var raf;
var ball = {
@@ -56,29 +56,29 @@ var ball = {
vx: 5,
vy: 2,
radius: 25,
- color: 'blue',
- draw: function() {
+ color: "blue",
+ draw: function () {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = this.color;
ctx.fill();
- }
+ },
};
function draw() {
- ctx.clearRect(0,0, canvas.width, canvas.height);
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
ball.draw();
ball.x += ball.vx;
ball.y += ball.vy;
raf = window.requestAnimationFrame(draw);
}
-canvas.addEventListener('mouseover', function(e) {
+canvas.addEventListener("mouseover", function (e) {
raf = window.requestAnimationFrame(draw);
});
-canvas.addEventListener('mouseout', function(e) {
+canvas.addEventListener("mouseout", function (e) {
window.cancelAnimationFrame(raf);
});
@@ -107,8 +107,8 @@ Veamos como se ve en acción hasta este punto. Dirige el ratón dentro del canva
```
```js hidden
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
var raf;
var ball = {
@@ -117,39 +117,37 @@ var ball = {
vx: 5,
vy: 2,
radius: 25,
- color: 'blue',
- draw: function() {
+ color: "blue",
+ draw: function () {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = this.color;
ctx.fill();
- }
+ },
};
function draw() {
- ctx.clearRect(0,0, canvas.width, canvas.height);
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
ball.draw();
ball.x += ball.vx;
ball.y += ball.vy;
- if (ball.y + ball.vy > canvas.height ||
- ball.y + ball.vy < 0) {
+ if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
ball.vy = -ball.vy;
}
- if (ball.x + ball.vx > canvas.width ||
- ball.x + ball.vx < 0) {
+ if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
ball.vx = -ball.vx;
}
raf = window.requestAnimationFrame(draw);
}
-canvas.addEventListener('mouseover', function(e) {
+canvas.addEventListener("mouseover", function (e) {
raf = window.requestAnimationFrame(draw);
});
-canvas.addEventListener('mouseout', function(e) {
+canvas.addEventListener("mouseout", function (e) {
window.cancelAnimationFrame(raf);
});
@@ -169,8 +167,8 @@ Esto reduce el vector vertical de velocidad para cada fotograma para que la bola
```
```js hidden
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
var raf;
var ball = {
@@ -179,41 +177,39 @@ var ball = {
vx: 5,
vy: 2,
radius: 25,
- color: 'blue',
- draw: function() {
+ color: "blue",
+ draw: function () {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = this.color;
ctx.fill();
- }
+ },
};
function draw() {
- ctx.clearRect(0,0, canvas.width, canvas.height);
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
ball.draw();
ball.x += ball.vx;
ball.y += ball.vy;
- ball.vy *= .99;
- ball.vy += .25;
+ ball.vy *= 0.99;
+ ball.vy += 0.25;
- if (ball.y + ball.vy > canvas.height ||
- ball.y + ball.vy < 0) {
+ if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
ball.vy = -ball.vy;
}
- if (ball.x + ball.vx > canvas.width ||
- ball.x + ball.vx < 0) {
+ if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
ball.vx = -ball.vx;
}
raf = window.requestAnimationFrame(draw);
}
-canvas.addEventListener('mouseover', function(e) {
+canvas.addEventListener("mouseover", function (e) {
raf = window.requestAnimationFrame(draw);
});
-canvas.addEventListener('mouseout', function(e) {
+canvas.addEventListener("mouseout", function (e) {
window.cancelAnimationFrame(raf);
});
@@ -221,8 +217,8 @@ ball.draw();
```
```js
-ball.vy *= .99;
-ball.vy += .25;
+ball.vy *= 0.99;
+ball.vy += 0.25;
```
{{EmbedLiveSample("Second_demo", "610", "310")}}
@@ -236,8 +232,8 @@ Hasta este punto hemos limpiado los fotogramas anteriores con el método {{domxr
```
```js hidden
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
var raf;
var ball = {
@@ -246,42 +242,40 @@ var ball = {
vx: 5,
vy: 2,
radius: 25,
- color: 'blue',
- draw: function() {
+ color: "blue",
+ draw: function () {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = this.color;
ctx.fill();
- }
+ },
};
function draw() {
- ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+ ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ball.draw();
ball.x += ball.vx;
ball.y += ball.vy;
- ball.vy *= .99;
- ball.vy += .25;
+ ball.vy *= 0.99;
+ ball.vy += 0.25;
- if (ball.y + ball.vy > canvas.height ||
- ball.y + ball.vy < 0) {
+ if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
ball.vy = -ball.vy;
}
- if (ball.x + ball.vx > canvas.width ||
- ball.x + ball.vx < 0) {
+ if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
ball.vx = -ball.vx;
}
raf = window.requestAnimationFrame(draw);
}
-canvas.addEventListener('mouseover', function(e) {
+canvas.addEventListener("mouseover", function (e) {
raf = window.requestAnimationFrame(draw);
});
-canvas.addEventListener('mouseout', function(e) {
+canvas.addEventListener("mouseout", function (e) {
window.cancelAnimationFrame(raf);
});
@@ -289,7 +283,7 @@ ball.draw();
```
```js
-ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
```
@@ -304,8 +298,8 @@ Para controlar la bola, podemos hacerla seguir nuestro ratón usando el evento [
```
```js
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
var raf;
var running = false;
@@ -315,19 +309,19 @@ var ball = {
vx: 5,
vy: 1,
radius: 25,
- color: 'blue',
- draw: function() {
+ color: "blue",
+ draw: function () {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = this.color;
ctx.fill();
- }
+ },
};
function clear() {
- ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
- ctx.fillRect(0,0,canvas.width,canvas.height);
+ ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function draw() {
@@ -346,7 +340,7 @@ function draw() {
raf = window.requestAnimationFrame(draw);
}
-canvas.addEventListener('mousemove', function(e) {
+canvas.addEventListener("mousemove", function (e) {
if (!running) {
clear();
ball.x = e.clientX;
@@ -355,14 +349,14 @@ canvas.addEventListener('mousemove', function(e) {
}
});
-canvas.addEventListener('click', function(e) {
+canvas.addEventListener("click", function (e) {
if (!running) {
raf = window.requestAnimationFrame(draw);
running = true;
}
});
-canvas.addEventListener('mouseout', function(e) {
+canvas.addEventListener("mouseout", function (e) {
window.cancelAnimationFrame(raf);
running = false;
});
diff --git a/files/es/web/api/canvas_api/tutorial/basic_animations/index.md b/files/es/web/api/canvas_api/tutorial/basic_animations/index.md
index 8a3b2a275dbba9..3ca189d24c76c3 100644
--- a/files/es/web/api/canvas_api/tutorial/basic_animations/index.md
+++ b/files/es/web/api/canvas_api/tutorial/basic_animations/index.md
@@ -15,13 +15,13 @@ Probablemente la mayor limitación es que una vez que se dibuja una forma, se ma
Estos son los pasos que necesitas para dibujar un cuadro:
1. **Limpiar el canvas**
- A menos que las formas que vas a dibujar llenen el canvas completo (por ejemplo, una imagen de fondo), debes borrar cualquier forma que haya dibujado previamente. La forma más fácil de hacerlo es usar el método {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}.
+ A menos que las formas que vas a dibujar llenen el canvas completo (por ejemplo, una imagen de fondo), debes borrar cualquier forma que haya dibujado previamente. La forma más fácil de hacerlo es usar el método {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}.
2. **Guardar el estado del canvas**
- Si estás cambiando alguna configuración (como estilos, transformaciones, etc.) que afecte el estado del canvas y deseas asegurarte de que se utiliza el estado original cada vez que se dibuja una figura, debes guardar ese estado original.
+ Si estás cambiando alguna configuración (como estilos, transformaciones, etc.) que afecte el estado del canvas y deseas asegurarte de que se utiliza el estado original cada vez que se dibuja una figura, debes guardar ese estado original.
3. **Dibujar formas animadas**
- El paso en el que realizas el renderizado del cuadro actual.
+ El paso en el que realizas el renderizado del cuadro actual.
4. **Restaurar el estado del canvas**
- Si has guardado el estado, restáuralo antes de dibujar un nuevo cuadro.
+ Si has guardado el estado, restáuralo antes de dibujar un nuevo cuadro.
## Controlando una animación
@@ -52,45 +52,51 @@ Este ejemplo animado es un pequeño modelo de nuestro sistema solar.
var sun = new Image();
var moon = new Image();
var earth = new Image();
-function init(){
- sun.src = 'canvas_sun.png';
- moon.src = 'canvas_moon.png';
- earth.src = 'canvas_earth.png';
+function init() {
+ sun.src = "canvas_sun.png";
+ moon.src = "canvas_moon.png";
+ earth.src = "canvas_earth.png";
window.requestAnimationFrame(draw);
}
function draw() {
- var ctx = document.getElementById('canvas').getContext('2d');
+ var ctx = document.getElementById("canvas").getContext("2d");
- ctx.globalCompositeOperation = 'destination-over';
- ctx.clearRect(0,0,300,300); // limpiar canvas
+ ctx.globalCompositeOperation = "destination-over";
+ ctx.clearRect(0, 0, 300, 300); // limpiar canvas
- ctx.fillStyle = 'rgba(0,0,0,0.4)';
- ctx.strokeStyle = 'rgba(0,153,255,0.4)';
+ ctx.fillStyle = "rgba(0,0,0,0.4)";
+ ctx.strokeStyle = "rgba(0,153,255,0.4)";
ctx.save();
- ctx.translate(150,150);
+ ctx.translate(150, 150);
// La tierra
var time = new Date();
- ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
- ctx.translate(105,0);
- ctx.fillRect(0,-12,50,24); // Sombra
- ctx.drawImage(earth,-12,-12);
+ ctx.rotate(
+ ((2 * Math.PI) / 60) * time.getSeconds() +
+ ((2 * Math.PI) / 60000) * time.getMilliseconds(),
+ );
+ ctx.translate(105, 0);
+ ctx.fillRect(0, -12, 50, 24); // Sombra
+ ctx.drawImage(earth, -12, -12);
// La luna
ctx.save();
- ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
- ctx.translate(0,28.5);
- ctx.drawImage(moon,-3.5,-3.5);
+ ctx.rotate(
+ ((2 * Math.PI) / 6) * time.getSeconds() +
+ ((2 * Math.PI) / 6000) * time.getMilliseconds(),
+ );
+ ctx.translate(0, 28.5);
+ ctx.drawImage(moon, -3.5, -3.5);
ctx.restore();
ctx.restore();
ctx.beginPath();
- ctx.arc(150,150,105,0,Math.PI*2,false); // Órbita terrestre
+ ctx.arc(150, 150, 105, 0, Math.PI * 2, false); // Órbita terrestre
ctx.stroke();
- ctx.drawImage(sun,0,0,300,300);
+ ctx.drawImage(sun, 0, 0, 300, 300);
window.requestAnimationFrame(draw);
}
@@ -109,14 +115,14 @@ init();
Este ejemplo dibuja una reloj animado, mostrando la hora actual.
```js
-function clock(){
+function clock() {
var now = new Date();
- var ctx = document.getElementById('canvas').getContext('2d');
+ var ctx = document.getElementById("canvas").getContext("2d");
ctx.save();
- ctx.clearRect(0,0,150,150);
- ctx.translate(75,75);
- ctx.scale(0.4,0.4);
- ctx.rotate(-Math.PI/2);
+ ctx.clearRect(0, 0, 150, 150);
+ ctx.translate(75, 75);
+ ctx.scale(0.4, 0.4);
+ ctx.rotate(-Math.PI / 2);
ctx.strokeStyle = "black";
ctx.fillStyle = "white";
ctx.lineWidth = 8;
@@ -124,11 +130,11 @@ function clock(){
// Aguja de la hora
ctx.save();
- for (var i=0;i<12;i++){
+ for (var i = 0; i < 12; i++) {
ctx.beginPath();
- ctx.rotate(Math.PI/6);
- ctx.moveTo(100,0);
- ctx.lineTo(120,0);
+ ctx.rotate(Math.PI / 6);
+ ctx.moveTo(100, 0);
+ ctx.lineTo(120, 0);
ctx.stroke();
}
ctx.restore();
@@ -136,69 +142,71 @@ function clock(){
// Aguja del minuto
ctx.save();
ctx.lineWidth = 5;
- for (i=0;i<60;i++){
- if (i%5!=0) {
+ for (i = 0; i < 60; i++) {
+ if (i % 5 != 0) {
ctx.beginPath();
- ctx.moveTo(117,0);
- ctx.lineTo(120,0);
+ ctx.moveTo(117, 0);
+ ctx.lineTo(120, 0);
ctx.stroke();
}
- ctx.rotate(Math.PI/30);
+ ctx.rotate(Math.PI / 30);
}
ctx.restore();
var sec = now.getSeconds();
var min = now.getMinutes();
- var hr = now.getHours();
- hr = hr>=12 ? hr-12 : hr;
+ var hr = now.getHours();
+ hr = hr >= 12 ? hr - 12 : hr;
ctx.fillStyle = "black";
// Escribimos la hora
ctx.save();
- ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
+ ctx.rotate(
+ hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec,
+ );
ctx.lineWidth = 14;
ctx.beginPath();
- ctx.moveTo(-20,0);
- ctx.lineTo(80,0);
+ ctx.moveTo(-20, 0);
+ ctx.lineTo(80, 0);
ctx.stroke();
ctx.restore();
// escribimos los minutos
ctx.save();
- ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
+ ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec);
ctx.lineWidth = 10;
ctx.beginPath();
- ctx.moveTo(-28,0);
- ctx.lineTo(112,0);
+ ctx.moveTo(-28, 0);
+ ctx.lineTo(112, 0);
ctx.stroke();
ctx.restore();
// escribimos los segundos
ctx.save();
- ctx.rotate(sec * Math.PI/30);
+ ctx.rotate((sec * Math.PI) / 30);
ctx.strokeStyle = "#D40000";
ctx.fillStyle = "#D40000";
ctx.lineWidth = 6;
ctx.beginPath();
- ctx.moveTo(-30,0);
- ctx.lineTo(83,0);
+ ctx.moveTo(-30, 0);
+ ctx.lineTo(83, 0);
ctx.stroke();
ctx.beginPath();
- ctx.arc(0,0,10,0,Math.PI*2,true);
+ ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
ctx.fill();
ctx.beginPath();
- ctx.arc(95,0,10,0,Math.PI*2,true);
+ ctx.arc(95, 0, 10, 0, Math.PI * 2, true);
ctx.stroke();
ctx.fillStyle = "rgba(0,0,0,0)";
- ctx.arc(0,0,3,0,Math.PI*2,true);
+ ctx.arc(0, 0, 3, 0, Math.PI * 2, true);
ctx.fill();
ctx.restore();
ctx.beginPath();
ctx.lineWidth = 14;
- ctx.strokeStyle = '#325FA2';
- ctx.arc(0,0,142,0,Math.PI*2,true);
+ ctx.strokeStyle = "#325FA2";
+ ctx.arc(0, 0, 142, 0, Math.PI * 2, true);
ctx.stroke();
ctx.restore();
@@ -225,7 +233,7 @@ var img = new Image();
// Variables de usuario - personalizar estas para cambiar la imagen cuando inicie el desplazamiento
// dirección y velocidad.
-img.src = 'capitan_meadows_yosemite_national_park.jpg';
+img.src = "capitan_meadows_yosemite_national_park.jpg";
var CanvasXSize = 800;
var CanvasYSize = 200;
var speed = 30; //más bajo es más rápido
@@ -242,68 +250,68 @@ var clearX;
var clearY;
var ctx;
-img.onload = function() {
- imgW = img.width * scale;
- imgH = img.height * scale;
+img.onload = function () {
+ imgW = img.width * scale;
+ imgH = img.height * scale;
- if (imgW > CanvasXSize) {
- // imagen más grande que canvas
- x = CanvasXSize - imgW;
- }
- if (imgW > CanvasXSize) {
- // ancho de imagen más grande que canvas
- clearX = imgW;
- } else {
- clearX = CanvasXSize;
- }
- if (imgH > CanvasYSize) {
- // altura de la imagen más grande que canvas
- clearY = imgH;
- } else {
- clearY = CanvasYSize;
- }
+ if (imgW > CanvasXSize) {
+ // imagen más grande que canvas
+ x = CanvasXSize - imgW;
+ }
+ if (imgW > CanvasXSize) {
+ // ancho de imagen más grande que canvas
+ clearX = imgW;
+ } else {
+ clearX = CanvasXSize;
+ }
+ if (imgH > CanvasYSize) {
+ // altura de la imagen más grande que canvas
+ clearY = imgH;
+ } else {
+ clearY = CanvasYSize;
+ }
- // obtener contexto de canvas
- ctx = document.getElementById('canvas').getContext('2d');
+ // obtener contexto de canvas
+ ctx = document.getElementById("canvas").getContext("2d");
- // establecer frecuencia de actualización
- return setInterval(draw, speed);
-}
+ // establecer frecuencia de actualización
+ return setInterval(draw, speed);
+};
function draw() {
- ctx.clearRect(0, 0, clearX, clearY); // clear the canvas
-
- // si la imagen es <= tamaño de Canvas
- if (imgW <= CanvasXSize) {
- // reiniciar, comenzar desde el principio
- if (x > CanvasXSize) {
- x = -imgW + x;
- }
- // dibujar image1 adicional
- if (x > 0) {
- ctx.drawImage(img, -imgW + x, y, imgW, imgH);
- }
- // dibujar image2 adicional
- if (x - imgW > 0) {
- ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH);
- }
+ ctx.clearRect(0, 0, clearX, clearY); // clear the canvas
+
+ // si la imagen es <= tamaño de Canvas
+ if (imgW <= CanvasXSize) {
+ // reiniciar, comenzar desde el principio
+ if (x > CanvasXSize) {
+ x = -imgW + x;
+ }
+ // dibujar image1 adicional
+ if (x > 0) {
+ ctx.drawImage(img, -imgW + x, y, imgW, imgH);
+ }
+ // dibujar image2 adicional
+ if (x - imgW > 0) {
+ ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH);
}
+ }
- // la imagen es > tamaño de Canvas
- else {
- // reiniciar, comenzar desde el principio
- if (x > (CanvasXSize)) {
- x = CanvasXSize - imgW;
- }
- // dibujar image adicional
- if (x > (CanvasXSize-imgW)) {
- ctx.drawImage(img, x - imgW + 1, y, imgW, imgH);
- }
+ // la imagen es > tamaño de Canvas
+ else {
+ // reiniciar, comenzar desde el principio
+ if (x > CanvasXSize) {
+ x = CanvasXSize - imgW;
+ }
+ // dibujar image adicional
+ if (x > CanvasXSize - imgW) {
+ ctx.drawImage(img, x - imgW + 1, y, imgW, imgH);
}
- // dibujar imagen
- ctx.drawImage(img, x, y,imgW, imgH);
- // cantidad para moverse
- x += dx;
+ }
+ // dibujar imagen
+ ctx.drawImage(img, x, y, imgW, imgH);
+ // cantidad para moverse
+ x += dx;
}
```
diff --git a/files/es/web/api/canvas_api/tutorial/basic_usage/index.md b/files/es/web/api/canvas_api/tutorial/basic_usage/index.md
index 0c380e79c65221..3f20f4e7820945 100644
--- a/files/es/web/api/canvas_api/tutorial/basic_usage/index.md
+++ b/files/es/web/api/canvas_api/tutorial/basic_usage/index.md
@@ -36,7 +36,7 @@ Por ejemplo, podremos proporcionar un texto descriptivo del contenido del canvas
```
@@ -55,8 +55,8 @@ Si el contenido alternativo no se necesita, un simple `