キャンバスに背景リピートリニアグラデーションCSSを設定するには？

Question

私はcanvas

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

にこのCSSを追加したいが、私はそのcreateLinearGradient()方法とcreateRadialGradient()方法を見つけましたが、私はdegree(angle)のinitを追加することはできませんよ。

Answer 1

createLinearGradientとcreateRadialGradientは描画のためのCanvasRenderingContext2Dオブジェクトのメソッドなので、キャンバス要素のCSSプロパティにはbackgroundというように影響しません。

このように背景を設定するには、スタイルの柔軟性、キャンバス要素を使用できます。

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メソッドを呼び出したときに背景画像がキャンバスのグラフィックではありませんが、その出力画像はNO背景を持っていません。