3

var Canvas = document.getElementById ("Canvas");
var Contexto = Canvas.getContext ("2d");
Canvas.width = window.innerWidth;
Canvas.height = window.innerHeight;

Contexto.beginPath ();
Contexto.fillStyle = "blue";
Contexto.arc (50, 50, 15, 0, Math.PI * 2);
Contexto.fill ();
var ColorBorde = Canvas.style.getPropertyValue ("background");
console.log (ColorBorde);
Contexto.lineWidth = 5;
Contexto.strokeStyle = ColorBorde;
Contexto.stroke ();
* {
    margin: 0;
    padding: 0;
}

#Canvas {
    animation-name: CanvasAnimacion;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes CanvasAnimacion {
    0% {background-color: red;}
    50% {background-color: yellow;}
    100% {background-color: blue;}
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Programa JavaScript</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="Canvas"></canvas>
    <script src="script.js"></script>
</body>
</html>

Hola buenos días, tengo estos códigos y lo que pretendo es poder poner el valor del background del canvas, en el strokeStyle del círculo, para cuando lo designe con un "rgba", pueda poner que la estela que vaya dejando, sea del mismo color que el fondo del canvas.

2 respuestas 2

3

Te pongo un ejemplo usando getComputedStyle, como recomienda @Yussef, para que te hagas una idea de cómo podrías hacerlo:

var Canvas = document.getElementById ("Canvas");
var Contexto = Canvas.getContext ("2d");

let x=50
function refreshBackground() {
  Contexto.beginPath ();
    const ColorBorde = getComputedStyle(Canvas).backgroundColor;
  Contexto.fillStyle = "blue";
  Contexto.arc (x, 50, 15, 0, Math.PI * 2);
  Contexto.fill();

  Contexto.lineWidth = 5;
  Contexto.strokeStyle = ColorBorde;
  Contexto.stroke ();
  x=(++x % 250);
  requestAnimationFrame(refreshBackground);
}

requestAnimationFrame(refreshBackground)
* {
    margin: 0;
    padding: 0;
}

#Canvas {
    animation-name: CanvasAnimacion;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    width: 400px;
    height: 200px;
}

@keyframes CanvasAnimacion {
    0% {background-color: red;}
    50% {background-color: yellow;}
    100% {background-color: blue;}
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Programa JavaScript</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="Canvas"></canvas>
    <script src="script.js"></script>
</body>
</html>

1
  • Muchas gracias, es lo que queria.
    – Raul
    Commented el 12 feb. a las 11:34
1

Puedes usar getComputedStyle() para obtener los valores CSS, por ejemplo:

const ColorBorde = getComputedStyle(Canvas).backgroundColor;
1
  • Muchas gracias.
    – Raul
    Commented el 12 feb. a las 10:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.