Q: HTML5 Canvas ändern Hintergrundfarbe

Question

Ich frage mich nur, ist es möglich, Canvas Farbe von function call zu ändern? Ich habe diesen Code mit Kreis innerhalb Ich möchte außerhalb Farbe ändern (im Hintergrund):

var canvads = document.getElementById('canvas') 
var context = canvas.getContext('2d'); 

function circle() { 
    var centerX = 0; 
    var centerY = 0; 
    var radius = 78; 
    context.clearRect(0, 0, window.innerWidth,window.innerHeight); 

    context.fillStyle = 'rgba(0,0,0,0.5)'; 
    context.fillRect(0,0,window.innerWidth,window.innerHeight); 

    context.translate(canvas.width/2, canvas.height/2); 

    context.scale(1.5, 2); 

    context.beginPath(); 
    context.arc(centerX, centerY, radius, 0, 5 * Math.PI, false); 

    context.lineWidth = 5; 
    context.stroke(); 

    context.fillStyle = 'rgba(0,0,0,1)'; 

    context.globalCompositeOperation = 'destination-out'; 
    context.fill(); 

    context.globalCompositeOperation = 'source-over'; 
} 

function change_color() { 
    context.fillStyle = 'rgba(0,255,0,1)'; 
    context.fill(); 
} 

circle() 

JsFiddle

Answer 1

Was Sie brauchen, ist die Annäherung ein wenig ändern - obwohl es bis zu einem gewissen Grad zu "Hintergrund füllen" möglich ist, ist der Hauptweg Canvas funktioniert das ständige Neuzeichnen des gesamten Bildes. In HTML-Spielen passiert es X-mal pro Sekunde, aber in kleineren Projekten sollte es oft nach jeder Aktion gemacht werden. Also, in Ihrem Fall, so etwas wie dies sollte wahrscheinlich den Trick: FIDDLE

var canvads = document.getElementById('canvas') 
var context = canvas.getContext('2d'); 

function initCanvas() { 
    context.clearRect(0, 0, window.innerWidth,window.innerHeight); 

    context.fillStyle = 'rgba(0,0,0,0.5)'; 
    context.fillRect(0,0,window.innerWidth,window.innerHeight); 
} 

function circle() { 
    var centerX = 0; 
    var centerY = 0; 
    var radius = 78; 


    context.save() 
    context.translate(canvas.width/2, canvas.height/2); 

    context.scale(1.5, 2); 

    // define the arc path 
    context.beginPath(); 
    context.arc(centerX, centerY, radius, 0, 5 * Math.PI, false); 

    // stroke it 
    context.lineWidth = 5; 
    context.stroke(); 

    // make alpha solid (the color doesn't matter) 
    context.fillStyle = 'rgba(0,0,0,1)'; 

    // change composite mode and fill 
    context.globalCompositeOperation = 'destination-out'; 
    context.fill(); 
    context.restore() 

    // reset composite mode to default 
} 

function changeColor() { 
    context.fillStyle = 'rgba(0,255,0,1)'; 
    context.fillRect(0,0,window.innerWidth,window.innerHeight); 

    circle() 
} 

initCanvas() 
circle() 
document.querySelector('#but').addEventListener('click',changeColor) 

Und achten Sie auf Speichern/Wiederherstellen, vor allem nach Transformationen/drehen. Auch, onclick behoben.

Answer 2

Die Linien

context.fillStyle = 'rgba(0,0,0,0.5)'; 
context.fillRect(0,0,window.innerWidth,window.innerHeight); 

setzen Ihre Hintergrundfarbe schwarz mit 50% Opazität (was ungefähr gleich wie # 808080 oder rgb (128,128,128)) Ändern Sie dies, um eine andere Hintergrundfarbe zu haben

Answer 3

Einfach tun:

<style>#myCanvas { background-color: rgba(158, 167, 184, 0.2); }</style> 

Sie können es mit Javascript ändern. Überprüfen Sie die gleiche Frage hier für ausführlichere Antworten: here

Answer 4

Es ist ein Tippfehler in Ihrem Code.

<button on_click="change_color();"> 

sollte

<button onClick="change_color();"> 

Bitte diese Änderung vornehmen und dann versuchen, die Hintergrundfarbe zu ändern, wie in anderen Antworten erwähnt.

Answer 5

Um das Canvas-Element Hintergrundfarbe Sie verwenden

canvas.style.background = "red"; // a valid CSS colour. 

Sie die Leinwand mit einer transparenten Farbe füllen, wenn Sie eine Farbe möchten, die das Ergebnis der Sie Hintergrundfarbe und die transparente Füllung des Elements müssen um die richtige Hintergrundfarbe zu berechnen, die kombiniert die gewünschte Farbe ergibt.

Um diese Antwort zu helfen, zeigt, wie Mischfarben berechnet werden. Matching DOM colour blending