Як залити все полотно певним кольором

Question 1

Як залити весь <canvas>колір HTML5 одним кольором.

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

Інший - це створити щось із кольором всередині полотна, наприклад, прямокутник ( див. Тут ), але він все одно не заповнює кольором все полотно (у випадку, якщо полотно більше фігури, яку ми створили).

Чи є рішення залити все полотно певним кольором?

Question 2

Так, просто заповніть прямокутник суцільним кольором на полотні, використовуйте a 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">

Розгорніть фрагмент

Question 3

Якщо ви хочете зробити фон явно , ви повинні бути впевнені, що малюєте за поточними елементами на полотні.

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>

Розгорніть фрагмент

Question 5

Ви можете змінити фон полотна, виконавши це:

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

Question 6

Знаєте що, існує ціла бібліотека для графіки на полотні. Він називається p5.js. Ви можете додати його лише одним рядком у головному елементі та додатковим файлом 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);
}