javascript - 为从 Google Charts 创建的透明 Canvas /png 设置背景颜色

Question

我需要有关设置 Canvas 对象背景颜色的帮助，该 Canvas 对象是在 Google Charts Calendar 上使用 canvg 创建的。

这是 JS Fiddle .

下载的图像/png 具有透明背景，因为 Canvas 是这样的。我想更改它，使其不再透明而是白色。我尝试像这样使用 setAttribute:

  canvas.setAttribute(
    'style',
    'position: absolute; ' +
    'top: ' + (-chartArea.offsetHeight * 2) + 'px; ' +
    'left: ' + (-chartArea.offsetWidth * 2) + 'px;' +
    'backgroud-color: #fff;');

也使用这种方式:canvas.style.backgroundColor = 'blue'; 但是这些尝试都失败了，我一直没能找到一个好的答案。

非常感谢所有帮助。

Answer 1

尝试:

context = canvas.getContext("2d");

// set to draw behind current content
context.globalCompositeOperation = "destination-over";

// set background color
context.fillStyle = '#fff'; // <- background color

// draw background / rect on entire canvas
context.fillRect(0, 0, canvas.width, canvas.height);

来源:http://blogs.adobe.com/digitalmedia/2011/01/setting-the-background-color-when-generating-images-from-canvas-todataurl/