Comment remplir toute la toile avec une couleur spécifique

92

Comment remplir tout le HTML5 <canvas>avec une couleur.

J'ai vu des solutions comme celle- ci pour changer la couleur de fond en utilisant CSS mais ce n'est pas une bonne solution puisque le canevas reste transparent, la seule chose qui change est la couleur de l'espace qu'il occupe.

Une autre consiste à créer quelque chose avec la couleur à l'intérieur de la toile, par exemple un rectangle ( voir ici ) mais cela ne remplit toujours pas la toile entière avec la couleur (au cas où la toile serait plus grande que la forme que nous avons créée).

Existe-t-il une solution pour remplir toute la toile avec une couleur spécifique?

javascript html canvas Enve
la source

Réponses:

150

Oui, remplissez simplement un rectangle avec une couleur unie sur le canevas, utilisez le heightet widthdu canevas lui-même:

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">
Développer l'extrait

Spencer Wieczorek
la source
17

Si vous voulez faire l'arrière-plan explicitement , vous devez être certain de dessiner derrière les éléments actuels sur le canevas.

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);
nikk wong
la source
4
Merci d'avoir réalisé que les gens ne veulent peut-être pas seulement un bloc de couleur comme image!
FamousAv8er
6 

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>
Développer l'extrait

Carlos Enrique Hernndez Hernnd
la source
6

Vous pouvez modifier l'arrière-plan du canevas en procédant comme suit:

<head>
    <style>
        canvas {
            background-color: blue;
        }
    </style>
</head>
Hednek
la source
1
@Enve a dit qu'il ou elle voulait qu'il n'utilise pas CSS.
0

Vous savez quoi, il existe une bibliothèque entière pour les graphiques de toile. Il s'appelle p5.js. Vous pouvez l'ajouter avec une seule ligne dans votre élément head et un fichier sketch.js supplémentaire.

Faites-le d'abord à vos balises html et body:

<html style="margin:0 ; padding:0">
<body style="margin:0 ; padding:0">

Ajoutez ceci à votre tête:

<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>

Le fichier sketch.js

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(r, g, b);
}
Kingmanas
la source
Notez que p5.jsc'est 340kBminizied et gzippé! Je dirais que cette page contient des options un peu plus légères ..
kano
@kano J'ai écrit cette réponse quand j'étais juste un noob. Cela fait longtemps depuis.
kingmanas