logo标签列表

A: HTML5画布更改背景颜色

javascripthtmlhtml5-canvas
5

我想知道是否可能通过函数调用更改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

5个回答
9
为了设置画布元素的背景颜色，您可以使用以下代码：
canvas.style.background = "red";  // a valid CSS colour.

您正在使用透明色填充画布，如果您想要的颜色是元素背景颜色和透明填充组合而成的结果，请计算正确的背景颜色，以便合并后得到想要的颜色。
为了帮助解答，以下链接展示了如何计算混合颜色：匹配DOM颜色混合。
7
你需要改变一下方法 - 尽管在某种程度上可以“填充背景”，但canvas的主要工作方式是不断重绘整个图像。在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事件。

请记住，每次更改背景颜色时都必须重新绘制圆形。您可以在此答案中看到 changeColor() 函数内调用了 circle() 函数。 - user7883492
2

这些行

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

你将背景颜色设置为50％不透明的黑色（大约与#808080或rgb（128,128,128）相同）。请将其更改为不同的背景颜色。

谢谢你的回答，但我需要有不透明度。 - user2808421
你仍然可以这样做，你可以将rgba(0,0,0,0.5)更改为任何其他值。 - Kevin Sijbers
1
您的代码中有一个错别字。 

<button on_click="change_color();">

应该是

。
<button onClick="change_color();">

请执行此更改，然后按照其他答案中提到的更改背景颜色。
-1

只需这样做：

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

您可以使用JavaScript进行更改。 有关更详细的响应，请查看此处的相同问题：这里

谢谢，我尝试了但似乎在我的情况下不起作用。https://jsfiddle.net/cs7ezuzf/2/ - user2808421
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接