問：HTML5 Canvas 更改背景顏色

Question

我只是想知道是否可以從function call更改Canvas顏色？ 我有這個帶有圓圈的代碼，我想更改外部顏色（背景）：

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

提琴手

Answer 1

設置您使用的畫布元素背景顏色

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

您正在用透明顏色填充畫布，如果您想要一種顏色是元素背景顏色的結果，而透明填充則需要計算正確的背景顏色，當組合在一起時會為您提供所需的顏色。

為了幫助這個答案顯示了如何計算混合顏色。 匹配 DOM 顏色混合

Answer 2

您需要的是稍微改變方法 - 盡管在某種程度上可以“填充背景”，但畫布的主要工作方式是不斷重繪整個圖像。 在 HTML 游戲中，它每秒執行 X 次，但在較小的項目中，通常應該在每個操作之后執行。 所以，在你的情況下，這樣的事情應該可以解決問題： FIDDLE

var canvas = 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)

並注意保存/恢復，尤其是在轉換/旋轉之后。 此外，固定點擊。

Answer 3

線條

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

正在將您的背景顏色設置為黑色，不透明度為 50%（與 #808080 或 rgb(128,128,128) 大致相同）將其更改為具有不同的背景顏色

Answer 4

你的代碼有錯別字。

<button on_click="change_color();">

應該是

<button onClick="change_color();">

請進行此更改，然后嘗試更改其他答案中提到的背景顏色。

Answer 5

簡單地做：

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

您可以使用 javascript 更改它。 在此處檢查相同的問題以獲取更詳細的答復： 此處