canvasの実装に関して質問させていただきます。
http://paulkr.github.io/quietflow.js/
こちらのサイトのサンプル[bouncingBalls]に変更を加えたいのですが、
どのように実装したら良いでしょうか。
下記4点の変更を加えたいです。
1)ボールのの半径の最大値、最小値
2)スピード
3)ボールのスタイル変更
べた塗り→CSSで水玉模様に変更
例)
css
1.circle { 2background-color: #fcfcfc; 3background-image: radial-gradient(#eee 10%, transparent 20%), radial-gradient(#eee 10%, transparent 20%); 4background-size: 20px 20px; 5background-position: 0 0, 10px 10px; 6}
4)ボールに写真を指定 / 写真は画一ではなく3枚指定
※3と4は同一キャンバスではなく、別キャンバスとして用意するので問題ありません。
↓↓↓上記以外で実装したこと
index.jsを下記に変更し、背景色、ボールの数、密度を変えました。
スピードは変化しませんでした。
java
1$("#bouncingBalls").show(); 2 $("body").quietflow({ 3 theme : "bouncingBalls", 4 specificColors : [ 5 // 変更↓--------------- 6 "rgba(242, 169, 49, 1)", 7 "rgba(77, 176, 77, 1)", 8 "rgba(229, 0, 110, 1)", 9 "rgba(45, 174, 223, 1)" 10 ], 11 // 追加・変更↓--------------- 12 backgroundCol : "#fff", 13 maxRadius : 150, 14 bounceSpeed : 50, 15 bounceBallCount : 16, 16 transparent : true 17 }); 18
わかる方がいらっしゃいましたら、ご教示お願い申し上げます。
あなたの回答
tips
プレビュー