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

JsFiddle

Answer 1

您需要稍微改变方法 - 尽管在某种程度上可以“填充背景”，但画布的主要工作方式是不断重绘整个图像。在 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)

并注意保存/恢复，尤其是在变换/旋转之后。此外，修复了 onclick。

Answer 2

设置你使用的画布元素背景颜色

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

您正在用透明颜色填充画布，如果您想要一种颜色，该颜色是元素背景颜色和透明填充的结果，您需要计算正确的背景颜色，当组合后，您可以得到所需的颜色。

为了帮助这个答案显示如何计算混合颜色。 Matching DOM colour blending

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 更改它。 在此处查看相同的问题以获得更详细的回复：here