如何在画布中设置背景重复线性渐变 css

Question

我想在canvas中添加这个css

background: repeating-linear-gradient( 129deg, #000, #000 10px, #f69d00 10px, #f69d00 20px );

我找到了createLinearGradient()方法和createRadialGradient()方法，但我无法添加degree(angle) init。

Answer 1

createLinearGradient和createRadialGradient是用于绘制的CanvasRenderingContext2D对象的方法，因此它们不会影响画布元素的CSS属性作为background。

您可以使用样式属性，canvas元素来设置背景，如下所示。

const canvas = document.querySelector("canvas");
const deg = 129;
canvas.style.backgroundImage = `repeating-linear-gradient( ${deg}deg, #000, #000 10px, #f69d00 10px, #f69d00 20px )`;

注意：背景图像不是画布图形，因此当您调用toDataURL或toBlob方法时，输出图像没有背景。