Tüm tuvali belirli bir renkle doldurma

Question 1

HTML5'in tamamı <canvas>tek renkle nasıl doldurulur .

CSS kullanarak arka plan rengini değiştirmek için bunun gibi bazı çözümler gördüm ancak tuval şeffaf kaldığı için bu iyi bir çözüm değil, değişen tek şey kapladığı alanın rengi.

Bir diğeri, tuvalin içindeki renkle bir şey oluşturmaktır, örneğin bir dikdörtgen ( buraya bakın ), ancak yine de tüm tuvali renkle doldurmuyor (kanvas oluşturduğumuz şekilden daha büyükse).

Tüm tuvali belirli bir renkle doldurmanın bir çözümü var mı?

Question 2

Evet, bir Dikdörtgeni tuval boyunca düz bir renkle doldurun , tuvalin kendisinin heightve karakterini kullanın 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">

Snippet'i genişlet

Question 3

Arka planı açıkça yapmak istiyorsanız , tuval üzerindeki mevcut öğelerin arkasını çizdiğinizden emin olmalısınız .

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>

Snippet'i genişlet

Question 5

Bunu yaparak tuvalin arka planını değiştirebilirsiniz:

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

Question 6

Biliyor musun, tuval grafikleri için tam bir kütüphane var. Buna p5.js adı verilir. Bunu, baş öğenize yalnızca tek bir satır ve ek bir sketch.js dosyasıyla ekleyebilirsiniz.

Bunu önce html ve gövde etiketlerinize yapın:

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

Bunu kafana ekle:

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

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