web-dev-qa-db-fra.com

Comment remplir toute la toile avec une couleur spécifique

Comment remplir un <canvas> HTML5 entier avec une couleur.

J'ai vu des solutions telles que this pour changer la couleur de fond à l'aide de CSS, mais ce n'est pas une bonne solution car la toile reste transparente. La seule chose qui change est la couleur de l'espace qu'elle occupe. 

Une autre solution 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 créée) .

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

javascripthtml5canvas
49
Enve

Oui, remplissez simplement un rectangle avec une couleur unie sur le canevas, utilisez les height et width du 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">

88
Spencer Wieczorek

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>

3
Carlos Enrique Hernndez Hernnd

Si vous voulez faire le fond explicitement , vous devez être certain de dessiner derrière les éléments actuels du 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);
0
nikk wong

Vous savez quoi, il y a une bibliothèque entière pour les graphiques sur toile. Il s’appelle p5.jsVous pouvez l’ajouter avec une seule ligne dans votre élément head et un fichier sketch.js supplémentaire . Faites-le d’abord avec 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);
  }
0
Manas Singh

Bonjour, vous pouvez changer l’arrière-plan de la toile en procédant comme suit:

<head>
  <style>
        canvas{
               background-color:blue; 
               }

  </style>
</head>
0
hednek