Javascriptキャンバスフラクタル

今日、私はセレンの投稿を読み、T-フラクタルの美しさに触発されました。 JavaScript Canvasでラスターコンポジションを作成するのが少し好きなので、JSを使用してクライアント側でのみ同じことを実装し、サーバーを負荷から解放するというアイデアがありました。



HTMLドキュメントの本文で、 <canvas>



を作成する必要があります。

 <canvas id="canvas"></canvas>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それは非常に奇妙です：デフォルトでは300x150のサイズです。 彼はjavascriptから新しいサイズを設定する方が良いです。

 var canva = document.getElementById('canvas'); canva.width = window.innerWidth; canva.height = window.innerHeight; var ctx = canva.getContext('2d');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、いくつかの補助関数を定義します。

 function clear() { ctx.clearRect(0, 0, canva.width, canva.height); ctx.fillStyle = 'rgba(0,0,0,1)'; ctx.fillRect(0, 0, canva.width, canva.height); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

clear()



関数は、作業領域全体をクリアします。 すぐにclearRect



とfull fillRect



があるのはなぜですか？ そして確かに 。



次の関数は、指定された場所に特定のサイズの単一パターンを表示する役割を果たします。 パターン自体は、 figure



サイズNxNの2次元配列を使用して記述され、その要素は値0および1を取ります（0は透明ブロック、1はカラーブロックです）。

 function PrintFigure(x, y, size, style) { var sizeElem = Math.floor(size / N); for (var i = 0; i < N; i++) for (var k = 0; k < N; k++) if (figure[i][k] == 1) { ctx.fillStyle = style; ctx.fillRect(x + i * sizeElem, y + k * sizeElem, sizeElem, sizeElem); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

座標とサイズをレンダリングするときは、注意して整数でない可能性のある数値を切り捨てる必要があります。



図面の境界線はキャンバスの境界線になります。

 var MAX_X = canva.width, MAX_Y = canva.height;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

均一な画像を得るには、少し手を加える必要があります。



そして最後に、与えられた領域にパターンを描画する関数、それが配置されるまで[領域]。

 function CreateTFractal() { clear(); var size = N; var countByX = Math.floor(MAX_X / size), countByY = Math.floor(MAX_Y / size); while ((countByX > 0) && (countByY > 0)) { //      for (var i = 0; i <= countByX; i++) { for (var k = 0; k <= countByY; k++) { PrintFigure(i * size, k * size, size, 'rgba(255, 255, 255, 0.3)'); } // k } // i size *= 2; //      countByX = Math.floor(MAX_X / size), countByY = Math.floor(MAX_Y / size); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

while



のAND条件は、理論的にはORに置き換えるwhile



ます。



デモ / ダウンロードHTMLページとJSコードアーカイブ



画像の反復レンダリング（左から右、上から下）：







javascriptを使用して<canvas>



からPNGに画像を保存する機能に少し注意を払う価値があり<canvas>



。

 window.open(document.getElementById("canvas").toDataURL("image/png"),"tfract_save");
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この方法の欠点は、アドレスバーの長さの制限です。



以上です。 コードの残りは、フォームとコントロールの平凡な処理です。