Как заполнить весь холст определенным цветом

92

Как заполнить весь HTML5 <canvas>одним цветом.

Я видел некоторые решения, подобные этому, для изменения цвета фона с помощью CSS, но это не очень хорошее решение, поскольку холст остается прозрачным, единственное, что изменяется, - это цвет занимаемого пространства.

Другой - создать что-то с цветом внутри холста, например прямоугольник ( см. Здесь ), но он по-прежнему не заполняет весь холст цветом (в случае, если холст больше, чем форма, которую мы создали).

Есть ли решение заполнить весь холст определенным цветом?

javascript html canvas Enve
источник

Ответы:

150

Да, просто залейте прямоугольник сплошным цветом на холсте, используйте heightи widthсамого холста:

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">
Развернуть фрагмент

Спенсер Вечорек
источник
17

Если вы хотите сделать фон явно , вы должны быть уверены, что рисуете позади текущих элементов на холсте.

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);
Никк Вонг
источник
4
Спасибо за понимание, что люди могут не просто захотеть цветной блок в качестве изображения!
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>
Развернуть фрагмент

Карлос Энрике Хернндес Херннд
источник
6

Вы можете изменить фон холста, выполнив следующие действия:

<head>
    <style>
        canvas {
            background-color: blue;
        }
    </style>
</head>
Hednek
источник
1
@Enve сказал, что он или она не хочет использовать CSS.
0

Знаете что, есть целая библиотека для графики на холсте. Он называется p5.js. Вы можете добавить его с помощью одной строки в элементе head и дополнительного файла sketch.js.

Сначала сделайте это со своими тегами html и body:

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

Добавьте это себе в голову:

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

Файл sketch.js

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(r, g, b);
}
Kingmanas
источник
Обратите внимание, что p5.jsон 340kBуменьшен и сжат! Я бы сказал, что на этой странице есть несколько более легких вариантов ..
kano
@kano Я написал этот ответ, когда был еще новичком. С тех пор прошло много времени.
kingmanas