javascript - 各ボールの背景画像が異なるようにキャンバス上に複数のボールを描画するにはどうすればよいですか?可能ですか?

Question

質問: キャンバス上に複数の小さなボールを描画して、それぞれの小さなボールの背景画像が異なるようにするにはどうすればよいですか? 可能ですか?
私が今やりたいことは、各ボールを異なる色にして、そのボールを写真で塗りつぶしたいことです。

コードの一部:

リーリー

現在の効果:

Answer 1

img タグ内のリンクを変更し、コードをコピーしてローカル テストに貼り付けます。しかし、正直に言うと、背景のタイリングを使用して描画を実現することは、制御が非常に困難です。
もう 1 つの提案は、drawImage を使用して最初に描画し、次に globalCompositeOperation を使用して円をインターセプトすることです。

リーリー

Answer 2

リーリー

このようにグラデーションとして書かれています...非常に見苦しいですが、効果はほぼ同じです。 。

更新...

Answer 3

グラデーションランダムカラーランダム透明度

Answer 4

コメントアウトされたコードがそのままのような気がします

// var pat=cxt.createPattern(img,"no-repeat");
// cxt.fillStyle = pat;

これは私が書いたデモですが、互換性はテストされていません

https://codepen.io/jackpan/pe...