Bagaimana mengisi seluruh kanvas dengan warna tertentu

92

Cara mengisi seluruh HTML5 <canvas>dengan satu warna.

Saya melihat beberapa solusi seperti ini untuk mengubah warna latar belakang menggunakan CSS tetapi ini bukan solusi yang baik karena kanvas tetap transparan, satu-satunya hal yang berubah adalah warna ruang yang ditempati.

Cara lainnya adalah dengan membuat sesuatu dengan warna di dalam kanvas, misalnya persegi panjang ( lihat di sini ) tetapi tetap tidak memenuhi seluruh kanvas dengan warna (jika kanvas lebih besar dari bentuk yang kita buat).

Adakah solusi untuk mengisi seluruh kanvas dengan warna tertentu?

javascript html canvas Enve
sumber

Jawaban:

150

Ya, cukup isi Rectangle dengan warna solid di sepanjang kanvas, gunakan heightdan widthdari kanvas itu sendiri:

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">
Luaskan cuplikan

Spencer Wieczorek
sumber
17

Jika Anda ingin membuat latar belakang secara eksplisit , Anda harus yakin bahwa Anda menggambar di belakang elemen saat ini di kanvas.

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
sumber
4
Terima kasih telah menyadari bahwa orang mungkin tidak hanya menginginkan blok warna sebagai gambar!
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>
Luaskan cuplikan

Carlos Enrique Hernndez Hernnd
sumber
6

Anda dapat mengubah latar belakang kanvas dengan melakukan ini:

<head>
    <style>
        canvas {
            background-color: blue;
        }
    </style>
</head>
hednek
sumber
1
@ Enve mengatakan bahwa dia ingin itu tidak menggunakan CSS.
0

Anda tahu, ada perpustakaan lengkap untuk grafik kanvas. Ini disebut p5.js Anda dapat menambahkannya hanya dengan satu baris di elemen kepala Anda dan file sketch.js tambahan.

Lakukan ini pada tag html dan badan Anda terlebih dahulu:

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

Tambahkan ini ke kepala Anda:

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

File sketch.js

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(r, g, b);
}
kingmanas
sumber
Perhatikan bahwa p5.jsini 340kBminizied dan gzip! Menurut saya halaman ini berisi beberapa opsi yang sedikit lebih ringan ..
kano
@kano Saya menulis jawaban ini ketika saya masih noob. Sudah lama sekali.
kingmanas