Hoe de hele HTML5 <canvas>met één kleur te vullen.
Ik zag enkele oplossingen zoals ditom te veranderen de achtergrondkleur met behulp van CSS, maar dit is geen goede oplossing omdat het canvas transparant blijft, het enige dat verandert is de kleur van de ruimte die het inneemt.
Een andere is door iets te maken met de kleur in het canvas, bijvoorbeeld een rechthoek(zie hier), maar het vult nog steeds niet het hele canvas met de kleur (in het geval dat het canvas groter is dan de vorm die we hebben gemaakt).
Is er een oplossing om het hele canvas met een specifieke kleur te vullen?
Antwoord 1, autoriteit 100%
Ja, vul een rechthoek in met een effen kleur over het canvas, gebruik de heighten widthvan het canvas zelf:
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">Antwoord 2, autoriteit 15%
Als je de achtergrond explicietwilt doen, moet je er zeker van zijn dat je achterde huidige elementen op het canvas tekent.
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);
Antwoord 3, autoriteit 7%
Je kunt de achtergrond van het canvas als volgt wijzigen:
<head>
<style>
canvas {
background-color: blue;
}
</style>
</head>
Antwoord 4, autoriteit 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>Antwoord 5
Weet je wat, er is een hele bibliotheek voor canvasafbeeldingen. Het heet p5.js
Je kunt het toevoegen met slechts een enkele regel in je head-element en een extra sketch.js-bestand.
Doe dit eerst met uw html- en body-tags:
<html style="margin:0 ; padding:0">
<body style="margin:0 ; padding:0">
Voeg dit toe aan je hoofd:
<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>
Het bestand sketch.js
function setup() {
createCanvas(windowWidth, windowHeight);
background(r, g, b);
}
Antwoord 6
We hebben geen toegang nodig tot de canvascontext.
Als u hednekin pure JS implementeert, krijgt u canvas.setAttribute('style', 'background-color:#00F8'). Maar mijn voorkeursmethode vereist het converteren van de kabab-casenaar camelCase.
canvas.style.backgroundColor = '#00F8'