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

27

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

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

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

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

    
задан Enve 02.01.2015 в 02:09
источник

3 ответа

58

Да, просто заполните прямоугольник сплошным цветом на холсте, используйте 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">
    
ответ дан Spencer Wieczorek 02.01.2015 в 02:14
источник
2

	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>
    
ответ дан Carlos Enrique Hernndez Hernnd 10.04.2018 в 06:41
источник
0

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

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

  </style>
</head>
    
ответ дан hednek 26.04.2018 в 23:24
источник
  • @Enve сказал, что он или она хотел, чтобы он не использовал CSS. –  Judah rogan 29.05.2018 в 02:41