我需要将我在画布中创建的图表导出为图像文件。我设法做到了，但图像是透明的（没有背景）。我的问题是，有没有办法通过代码为我从画布获得的现有图像添加背景颜色？
例子：
导出为 .png 时的画布：
【问题讨论】：
标签： javascript php css html canvas
您有多种方式来完成您的任务。
到目前为止，最简单的方法是在开始绘制图表之前用背景颜色填充整个画布。 提示：您不显示代码，但如果可能，请执行此简单的解决方案。 ;=)
context.fillStyle='white';
context.fillRect(0,0,canvas.width,canvas.height)
如果你不能在开始前填写，你还有一些选择。
您可以将图表保存到另一个画布，用背景色填充整个主画布，然后将保存的图表重新绘制回主画布。
// create a second canvas and draw the chart onto it
var secondCanvas=document.createElement('canvas');
var cctx=secondCanvas.getContext('2d');
secondCanvas.width=canvas.width;
secondCanvas.height=canvas.height;
cctx.drawImage(mainCanvas,0,0);
// fill the main canvas with a background
context.fillStyle='white';
context.fillRect(0,0,canvas.width,canvas.height)
// redraw the saved chart back to the main canvas
context.drawImage(secondCanvas,0,0);
您可以使用合成来在现有像素之后绘制新图形。绘制整个背景，它将出现在现有图表的后面。
// set compositing to draw all new pixels (background) UNDER
// the existing chart pixels
context.globalCompositeOperation='destination-over';
// fill the main canvas with a background
context.fillStyle='white';
context.fillRect(0,0,canvas.width,canvas.height)
// always clean up ... reset compositing to default
context.globalCompositeOperation='source-over';
【讨论】：
无需使用 JavaScript，只需使用 CSS 为图像设置背景色即可。
<style>
img {
background-color: black;
}
</style>
<img src="...">
请参阅此 JSFiddle 以获取另一个示例：https://jsfiddle.net/3jch7z94/1/
【讨论】：