シームレスパターンメーカー

キャンバスベースのタイルレンダリング

このツールはHTML5 Canvas APIを使用して、設定可能なキャンバス全体にタイル画像を繰り返し描画します。パターンレイアウトを最大限制御するため、各タイルは個別に配置・変換されます。

タイリングモード

• -通常グリッドモード：タイルをオフセットなしで規則的なグリッドパターンに配置します。
• -ハーフブリックモード：1行おきに半タイル幅ずらして、レンガ積みパターンを作ります。
• -斜めモード：各行に段階的なオフセットを適用して、斜めのタイリング効果を作ります。
• -ミラードモード：隣接タイルの水平・垂直フリップを交互に行い、左右対称パターンを作ります。

スケールと回転

スケールコントロールで各タイルを元のサイズの25%から400%までリサイズできます。回転は各タイルの中心を基準に変換を適用し、0〜360度の任意の角度が設定可能です。

CSSエクスポート

CSSエクスポートは単一タイルのキャンバスを作成し、現在のスケールと回転設定でタイルをレンダリングして、data URIに変換し、適切なbackground-repeatとbackground-sizeの値を持つbackground-image CSSプロパティを生成します。

クライアントサイド処理

すべての画像処理はCanvas APIを使ってブラウザ内で完結します。画像はサーバーにアップロードされることはなく、完全なプライバシーが保証されます。