如何下载HTML5画布的背景图像

Question

我有一个程序，可以随机化2种rgb颜色的r、g和b值，并创建混合颜色的线性渐变。然而，我创建线性渐变的唯一方法是将画布的背景图像设置为该渐变，这意味着当我下载画布时，它是空白的，因为背景图像没有向下加载。

CSS

.window {
width: 500px;
height: 500px;
background-image: linear-gradient(to right, white, black);
}

HTML

<canvas id = 'randomgradient_canvas' class = 'window'></canvas>

JavaScript

let r1, g1 b1, r2, g2, b2;
function randomizeColors() {
r1 = Math.random() * 255;
g1 = Math.random() * 255;
b1 = Math.random() * 255;
r2 = Math.random() * 255;
g2 = Math.random() * 255;
b2 = Math.random() * 255;
document.getElementById('randomgradient_canvas').style = `background-image:linear-gradient(to left, rgb(${r1}, ${g1}, ${b1}), rgb(${r2}, ${g2}, ${b2}))`;
}

这一切都非常适合制作渐变，唯一的问题是我在任何地方都找不到如何下载元素的背景图像。

Answer 1

CSS定义的背景没有绘制到画布缓冲区上，因此您无法获得它的像素数据。但是，您可以使用ctx.createLinearGradient()在画布上绘制渐变，然后使用ctx.getImageData或其他方法获得像素数据。