webentwicklung-frage-antwort-db.com.de

So füllen Sie die gesamte Leinwand mit einer bestimmten Farbe

Wie ganze HTML5 <canvas> mit einer Farbe füllen.

Ich habe einige Lösungen gesehen, wie this , um die Hintergrundfarbe mit CSS zu ändern. Dies ist jedoch keine gute Lösung, da die Leinwand transparent bleibt. Das einzige, was sich ändert, ist die Farbe des Raums, den sie einnimmt. 

Eine andere Möglichkeit besteht darin, etwas mit der Farbe innerhalb der Leinwand zu erstellen, z. B. ein Rechteck ( siehe hier ), füllt jedoch nicht die gesamte Leinwand mit der Farbe (falls die Leinwand größer ist als die von uns erstellte Form) .

Gibt es eine Lösung, um die gesamte Leinwand mit einer bestimmten Farbe zu füllen?

49
Enve

Ja, füllen Sie einfach ein Rechteck mit einer durchgehenden Farbe auf der Leinwand aus und verwenden Sie height und width der Leinwand selbst:

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

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>

Wenn Sie den Hintergrund explizit machen möchten, müssen Sie sicher sein, dass Sie hinter die aktuellen Elemente auf der Zeichenfläche zeichnen.

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

Weißt du was, es gibt eine ganze Bibliothek für Leinwandgrafiken. Es heißt p5.js Sie können es mit nur einer einzelnen Zeile in Ihrem head-Element und einer zusätzlichen sketch.js-Datei hinzufügen .. _. Machen Sie dies zunächst mit Ihren HTML- und Body-Tags

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

Fügen Sie dies Ihrem Kopf hinzu:

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

Die sketch.js-Datei

function setup() {
  createCanvas(windowWidth, windowHeight);
background(r, g, b);
  }
0
Manas Singh

Hallo, Sie können den Hintergrund der Leinwand wie folgt ändern:

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

  </style>
</head>
0
hednek