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

90

Wie man ganzes HTML5 <canvas>mit einer Farbe füllt .

Ich habe einige Lösungen wie diese gesehen , um die Hintergrundfarbe mithilfe von CSS zu ändern, aber dies ist 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, beispielsweise ein Rechteck ( siehe hier ), das jedoch nicht die gesamte Leinwand mit der Farbe füllt (falls die Leinwand größer als die von uns erstellte Form ist).

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

javascript html canvas Enve
quelle

Antworten:

147

Ja, füllen Sie einfach ein Rechteck mit einer Volltonfarbe auf der Leinwand aus und verwenden Sie das heightund widthder 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">
Erweitern Sie das Snippet

Spencer Wieczorek
quelle
14

Wenn Sie den Hintergrund explizit ausführen möchten, müssen Sie sicher sein, dass Sie hinter den aktuellen Elementen auf der Leinwand 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);
Nikk Wong
quelle
3
Vielen Dank, dass Sie erkannt haben, dass Menschen nicht nur einen Farbblock als Bild wünschen!
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>
Erweitern Sie das Snippet

Carlos Enrique Hernndez Hernnd
quelle
5

Sie können den Hintergrund der Leinwand folgendermaßen ändern:

<head>
    <style>
        canvas {
            background-color: blue;
        }
    </style>
</head>
Hednek
quelle
@Enve sagte, dass er oder sie wollte, dass es kein CSS verwendet.
0

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 Datei „trace.js“ hinzufügen.

Tun Sie dies zuerst 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 Datei scale.js

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(r, g, b);
}
Kingmanas
quelle
Beachten Sie, dass p5.jsist 340kBminizied und gzip! Ich würde sagen, diese Seite enthält einige etwas leichtere Optionen ..
Kano
@kano Ich habe diese Antwort geschrieben, als ich noch ein Noob war. Es ist lange her.
Kingmanas