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

【问题标题】：How to set background repeat linear gradient css in canvas?如何在画布中设置背景重复线性渐变css？
【发布时间】：2017-02-06 13:56:32
【问题描述】：

我想在canvas中添加这个css

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

我发现createLinearGradient()方法和createRadialGradient()方法，但是我无法添加degree(angle) init。

【问题讨论】：

贴出你试过的代码。

标签： javascript html css canvas fabricjs

【解决方案1】：

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

你可以使用 canvas 元素的 style 属性来设置背景，像这样。

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 方法时，输出图像没有背景。

【讨论】：