Agregar color
Para agregar color, disponemos de las propiedades fillStyle="color" y strokeStyle="color".
La sintaxis para declarar los colores acepta todas las especificaciones de colores CSS y las de CSS3 (véase más adelante en el libro). De este modo, el color naranja puede definirse por:
- ctx.fillStyle = "orange";
- ctx.fillStyle = "#FFA500";
- ctx.fillStyle = "rgb(255,165,0)";
- ctx.fillStyle = "rgba(255,165,0,1)";
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="UTF-8">
</head>
<body>
<canvas id="dibujo" width="200px" height="200px" style="border: 1px
solid black">
Su navegador no soporta la etiqueta canvas.
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("dibujo");
var contexto = canvas.getContext("2d");
contexto.fillStyle = "#99ccff";
contexto.fillRect(25,50,150,100);
</script>
</body>
</html>
Comentario
Si define la propiedad strokeStyle o fillStyle, el nuevo valor se convierte en el valor por defecto para todas las formas diseñadas a partir de ese instante. Para cada forma que queramos colorear de forma diferente, tendremos que volver a definir las propiedades fillStyle o strokeStyle.
Si desea saber más, le proponemos el siguiente libro:
Versión impresa
Versión online
En ilimitado con la suscripción ENI
En la tienda oficial de ENI
Condiciones generales de usoCopyright - © Éditions ENI ||Política de protección de datos del grupo ENI