Jak wypełnić całe płótno określonym kolorem

92

Jak wypełnić cały HTML5 <canvas>jednym kolorem.

Widziałem takie rozwiązania, jak to, aby zmienić kolor tła za pomocą CSS, ale nie jest to dobre rozwiązanie, ponieważ płótno pozostaje przezroczyste, jedyną rzeczą, która się zmienia, jest kolor zajmowanej przestrzeni.

Innym jest stworzenie czegoś z kolorem wewnątrz płótna, na przykład prostokąta ( patrz tutaj ), ale nadal nie wypełnia to całego płótna kolorem (w przypadku, gdy płótno jest większe niż utworzony przez nas kształt).

Czy istnieje rozwiązanie, aby wypełnić całe płótno określonym kolorem?

javascript html canvas Enve
źródło

Odpowiedzi:

150

Tak, po prostu wypełnij Prostokąt jednolitym kolorem w poprzek płótna, użyj heighti widthsamego płótna:

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">
Rozwiń fragment

Spencer Wieczorek
źródło
17

Jeśli chcesz jawnie zrobić tło , musisz mieć pewność, że rysujesz za bieżącymi elementami na płótnie.

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
źródło
4
Dziękujemy za zrozumienie, że ludzie mogą nie chcieć tylko bloku koloru jako obrazu!
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>
Rozwiń fragment

Carlos Enrique Hernndez Hernnd
źródło
6

Możesz zmienić tło płótna, wykonując następujące czynności:

<head>
    <style>
        canvas {
            background-color: blue;
        }
    </style>
</head>
hednek
źródło
1
@Enve powiedział, że chce, aby nie korzystało z CSS.
0

Wiesz co, jest cała biblioteka grafik na płótnie. Nazywa się p5.js. Możesz go dodać za pomocą pojedynczej linii w elemencie head i dodatkowego pliku sketch.js.

Zrób to najpierw z tagami HTML i body:

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

Dodaj to do swojej głowy:

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

Plik sketch.js.

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(r, g, b);
}
kingmanas
źródło
Zauważ, że p5.jsjest 340kBzminiaturyzowany i spakowany do gzip! Powiedziałbym, że ta strona zawiera nieco lżejsze opcje ...
kano
@kano Napisałem tę odpowiedź, gdy byłem tylko noobem. Minęło dużo czasu.
kingmanas