Question

我只是想知道是否可以从Canvas更改function call颜色？我有这个带圆圈的代码我想改变外面的颜色（背景）：

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

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

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

您正在使用透明颜色填充画布，如果您想要一种颜色是元素背景颜色的结果，那么您需要透明填充来计算正确的背景颜色，当组合时为您提供所需的颜色。 / p>

帮助此答案显示如何计算混合颜色。 Matching DOM colour blending

Answer 2

你需要的是稍微改变方法 - 尽管在某种程度上可以填充背景＆＃34;，画布工作的主要方式是不断重绘整个图像。在HTML游戏中，它每秒完成X次，但在较小的项目中，通常应该在每次操作后完成。所以，在你的情况下，这样的事情应该可以解决问题：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)

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

Answer 3

您的代码中存在拼写错误。

<button on_click="change_color();">

应该是

<button onClick="change_color();">

请进行此更改，然后尝试更改其他答案中提到的背景颜色。

Answer 4

行

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

将背景颜色设置为黑色，不透明度为50％（与＃808080或rgb（128,128,128）大致相同）将其更改为具有不同的背景颜色

Answer 5

简单地说：

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

您可以使用javascript进行更改。请在此处查看相同的问题，以获取更详细的回复：here

问：HTML5 Canvas更改背景颜色

5 个答案: