javascript - presion - calor especifico molar
Cómo llenar todo el lienzo con un color específico. (5)
Cómo llenar todo HTML5
<canvas>
con un color.
Vi algunas soluciones como this para cambiar el color de fondo usando CSS, pero esta no es una buena solución ya que el lienzo permanece transparente, lo único que cambia es el color del espacio que ocupa.
Otra es crear algo con el color dentro del lienzo, por ejemplo, un rectángulo ( ver aquí ) pero todavía no llena todo el lienzo con el color (en caso de que el lienzo sea más grande que la forma que creamos).
¿Hay alguna solución para llenar todo el lienzo con un color específico?
Hola, puedes cambiar el fondo del lienzo haciendo esto:
<head>
<style>
canvas{
background-color:blue;
}
</style>
</head>
Sí, solo complete un Rectángulo con un color sólido en el lienzo, use la
height
y el
width
del lienzo en sí:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
canvas{ border: 1px solid black; }
<canvas width=300 height=150 id="canvas">
Sabes qué, hay una biblioteca completa para gráficos de lienzo. Se llama p5.js. Puede agregarlo con una sola línea en su elemento de cabecera y un archivo sketch.js adicional. Haga esto primero con sus etiquetas html y body
<html style="margin:0 ; padding:0">
<body style="margin:0 ; padding:0">
Agregue esto a su cabeza:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>
<script type="text/javascript" src="sketch.js"></script>
El archivo sketch.js
function setup() {
createCanvas(windowWidth, windowHeight);
background(r, g, b);
}
Si desea hacer el fondo explícitamente , debe asegurarse de dibujar detrás de los elementos actuales en el lienzo.
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// Add behind elements.
ctx.globalCompositeOperation = ''destination-over''
// Now draw!
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
let canvas = document.getElementById(''canvas'');
canvas.setAttribute(''width'', window.innerWidth);
canvas.setAttribute(''height'', window.innerHeight);
let ctx = canvas.getContext(''2d'');
//Draw Canvas Fill mode
ctx.fillStyle = ''blue'';
ctx.fillRect(0,0,canvas.width, canvas.height);
* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow: hidden; }
<canvas id=''canvas''></canvas>