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

Question 1

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?

Question 2

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

Question 3

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

Question 4

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

Question 5

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

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

Question 6

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);
}