Cách tô toàn bộ canvas bằng màu cụ thể

Question 1

Cách tô toàn bộ HTML5 <canvas>bằng một màu.

Tôi đã thấy một số giải pháp như này để thay đổi màu nền bằng cách sử dụng CSS nhưng đây không phải là giải pháp tốt vì canvas vẫn trong suốt, điều duy nhất thay đổi là màu của không gian mà nó chiếm.

Một cách khác là tạo thứ gì đó có màu bên trong canvas, ví dụ như một hình chữ nhật ( xem tại đây ) nhưng nó vẫn không lấp đầy toàn bộ canvas với màu (trong trường hợp canvas lớn hơn hình dạng chúng ta đã tạo).

Có giải pháp nào để tô toàn bộ canvas bằng một màu cụ thể không?

Question 2

Có, chỉ cần điền vào một Hình chữ nhật với một màu đồng nhất trên canvas, sử dụng heightvà widthcủa chính canvas:

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

Mở rộng đoạn mã

Question 3

Nếu bạn muốn làm nền một cách rõ ràng , bạn phải chắc chắn rằng bạn vẽ đằng sau các phần tử hiện tại trên canvas.

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>

Mở rộng đoạn mã

Question 5

Bạn có thể thay đổi nền của canvas bằng cách thực hiện điều này:

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

Question 6

Bạn biết không, có toàn bộ thư viện cho đồ họa canvas. Nó được gọi là p5.js Bạn có thể thêm nó chỉ với một dòng duy nhất trong phần tử head và một tệp sketch.js bổ sung.

Trước tiên, hãy làm điều này với các thẻ html và body của bạn:

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

Thêm điều này vào đầu của bạn:

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

Tệp sketch.js

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(r, g, b);
}

Question 7

Chúng tôi không cần truy cập vào ngữ cảnh canvas.

Triển khai hednek trong JS thuần túy mà bạn sẽ nhận được canvas.setAttribute('style', 'background-color:#00F8'). Nhưng phương pháp ưa thích của tôi yêu cầu chuyển đổi kabab-case thành camelCase .

canvas.style.backgroundColor = '#00F8'