Comment remplir toute la toile avec une couleur spécifique

comment remplir tout HTML5 <canvas> avec une seule couleur.

j'ai vu quelques solutions comme ce pour changer la couleur de fond en utilisant CSS mais ce n'est pas une bonne solution puisque la toile reste transparente, la seule chose qui change est la couleur de l'espace qu'elle occupe.

un autre est en créant quelque chose avec la couleur à l'intérieur de la toile, par exemple un rectangle( voir ici ) mais il ne remplit toujours pas la toile entière avec la couleur (dans le cas où la toile est plus grande que la forme que nous avons créé).

y a-t-il une solution pour remplir toute la toile d'une couleur spécifique?

38
demandé sur Community 2015-01-02 04:09:32
la source

4 ответов

Oui, il suffit de remplir un Rectangle avec une couleur unie sur la toile, utilisez les height et width de la toile elle-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">
71
répondu Spencer Wieczorek 2015-01-02 04:14:12
la source

	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>
2
répondu Carlos Enrique Hernndez Hernnd 2018-04-10 07:41:52
la source

vous savez quoi, il y a une bibliothèque entière pour les graphiques sur toile. Il s'appelle p5.js Vous pouvez l'ajouter, avec une seule ligne dans votre élément de tête et une autre esquisse.fichier js. Faites ceci à vos balises html et de corps d'abord

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

L'esquisse.fichier js

function setup() {
  createCanvas(windowWidth, windowHeight);
background(r, g, b);
  }
0
répondu Manas Singh 2018-07-16 17:18:01
la source

Salut Vous pouvez changer le fond de la toile en faisant ceci:

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

  </style>
</head>
-1
répondu hednek 2018-04-27 00:24:03
la source

Autres questions sur