1

http://www.tivli.com/のように、中央にグラデーションのある花崗岩のような背景を作りたいです。w3cチュートリアルで両方を使用してグラデーションを作成する方法を見つけましたが、html5キャンバスまたはsvgで花崗岩の背景を作成する方法に関するチュートリアルはありますか？ありがとう。

4

1 に答える 1

2

参照したサイトは、実際には単純な「noize.png」を使用してから、css3放射状グラデーションを使用してその背景を構築しています。私はあなたがすでにそれを知っていたことを知っています、私は将来の読者のためにこれについて言及しています。
この事実を踏まえて、私の答えの残りの部分では、コピーパスタの解決策ではなく、あなたが学びたいと思います。

私はずっと前にsvglooongをあきらめました。しかし、キャンバスではそれは簡単で楽しいです...（特に今フラッシュは最終的に公式に死んでいます。万歳）。

他の人があなたの質問へのコメントですでに示唆しているように、シームレスなノイズ画像を使用してみませんか？（あなたは1つを見つける場所を知っています：P）。
この画像を「DATA」としてhtmlに埋め込むこともできます（、ヒント：画像データをキャンバスに直接フィードして「noise.php」としてレンダリングすることもできます）。

しかし、それでは..あなたは正しいです：noize-sizeを変更したい場合はどうなりますか？
そして、とにかく花崗岩/ノイズを作成する方法を知りたいです。
そして、数学的/プログラム的に、既製の画像（フラグメント）を提供するよりも文字数（ファイルサイズ）が少ないこのノイズを説明していますか？

UPDATE 2パート1を開始します。
実際、ぐっすり眠った後、視覚的なノイズがランダム性を判断するための最良の方法の1つであることに気づきました。人間は視覚的なパターンを見つけるのが得意なことで有名ですが、専門家でさえこれを使用します（したがって、これは、たとえば便利なワンタイムパッドが必要な暗号化でも頻繁に使用されます）。19分07秒から22分37秒までの「司令官」クロックフォードのYUI講義「セキュリティの原則
」 も参照してください。

では、なぜこれが重要なのでしょうか。ECMAスクリプト（別名javascript）は、緩いMath.random （）関数を定義します。

「実装に依存するアルゴリズムまたは戦略を使用して、 0以上1未満の正符号の数値を返します。ランダムに選択されるか、 その範囲全体にほぼ均一に分布する疑似ランダムに選択されます。 」

イタリック/太字の部分を読み直して、現実に自分を歓迎してください。すべてのブラウザ（ブランド/バージョン）には独自のランダムルーチンがあります!!
「しかし、それはどういう意味ですか？」まあ..簡単に言えば..ブラウザ（バージョン）のES-Script実装（咳咳IE）に応じて：Math.random（）に基づくノイズは、ノイズに目に見えるパターンをレンダリングします/可能性があります（可能なタイルサイズとは関係ありません） !!
したがって、この回答の残りの部分では、ブラウザが適切な乱数を吐き出す理想的な世界か、Googleのバブルというこの素晴らしい記事で説明されているように、制御してより強力な「予測可能な」乱数ソリューションを使用することを想定します。誤ってリークしました:)アップデート2パート1を終了します

それでは、放射状のグラデーション部分から始めましょう。あなたはすでにそれを理解しました。

次に、キャンバスのノイズ関数に従います（放射状グラデーションの前にこれを行うことができますが、この順序により、より良い粒子が得られ、グラデーションが生成するカラーバンディングが拡散します-平均的な液晶ディスプレイでは、それらがトゥルーカラーではありません-）：これはランダムなピクセルを生成することによって行われます。
使用するアルゴリズムはたくさんありますが、数学がなくても理解できる簡単なアルゴリズムを使用しまし
た。現代のフルスクリーン解像度でノイズを生成すると、解像度が1メガピクセルよりも簡単に大きくなることに注意してください。 、だからこれは遅いでしょう！これを克服するには、小さなシームレスタイルを生成して再利用する必要があります。これを、すでに放射状のグラデーションがあるフルサイズの画像のパターン塗りつぶしとして使用します。

また、ラジアルグラデーションをビューポートの中央に流動的に配置する必要があると想定しているため、（参照したnoize.png / css3の方法ではなく）固定の方法で移動する場合は、追加の方法も必要になります。 eventhandler'onResize（）'は、キャンバスに新しい背景をレンダリングさせます。なんで？ブラウザにこの背景画像（ページの読み込み時に作成される）を自動的に拡大縮小させる場合は、ノイズの適切な粒度がに変化し、望ましくないパターンが表示される場合もあります。

（私は今必死に眠りたいので..）：残りは私があなたのために書いた関数のソースコードで徹底的に説明されています。

これが私があなたのために書いた完全に文書化されたコードへのリンクです： jsfiddle.net/sU74C/そしてここであなたはそれを全画面プレビューで見ることができます。   更新1：関数genNoise 80％高速!!

必要に応じて（この回答へのリンクを保持して）使用するか、そこから学び、独自のことを行ってください。
この質問への回答を受け入れることを忘れないでください（うまくいけば私のものです:)）

お役に立てれば！

UPDATE 2パート2：
キャンバスを操作する方法は他にもあります。たとえば、ピクセルマップ/配列を計算/（再）使用/生成/保存/インポートすることもできます（png、base64、jpgなど）。より高速な8ビットおよびさらに高速な32ビットに関するこの優れた記事を参照してください（ブラウザは、ImageDataオブジェクトのデータプロパティのタイプとして「Uint8ClampedArray」をサポートしています）ピクセル配列、プロセッサのエンディアンを説明するための適切なソリューションを含みます!!

したがって、これにかなりの考えを与えた後、これを「正しく」行うことは実際には課題であり、2つの部分に分割する必要があることがわかりました。

  • ノイズデータ（Math.random（）またはカスタムランダムまたは事前定義された外部（image、json-string、random.com）または埋め込み（パック？）データ）はどこで入手できますか？
  • フルスクリーンサイズ/キャンバスでこのノイズを構築/保存/再利用するための最速の方法は何ですか。

このアップデートのパート1のステートメントと、目に見えるノイズにパターンが必要ないことを考えると、事前にレンダリングされた「ランダム」ノイズデータ（シームレスにタイリングすることを目的）を使用することに傾倒し始めています。ノイズジェネレーター：それ以外の場合は、エンジンに最適化されていない独自のランダム関数を実行するオーバーヘッドがあります（何度も..たくさん..）。
また、後で白黒と透明度だけでうまくいくかもしれないと思います。これにより、処理が大幅に高速化され、埋め込まれたピクセルデータが減少する可能性があります。
考えてみてください。黒または白は0または1に相当します。base64では、
1文字で6ビットを表すことができます。したがって、30x30pxの画像は900pxを6ビットで割った値=150文字です（スイートスポットは6pxずつ増加するため、次は36px * 36pxは216文字です）。

于 2012-07-27T14:21:25.717 に答える