画像無しでアーガイルやタータンチェックなどのパターンを生成する -Patternizer

画像を使用せずに、HTML5 Canvasでストライプ、チェック、アーガイル、タータンなどのパターンを生成するオンラインサービスを紹介します。

Patternizer

[ad#ad-2]

生成したパターンは、下記のようにページの背景として利用できます。
利用方法はのちほどご紹介。

背景にパターンを適用したページ

パターンはページ左の「Settings」でオリジナルのものを作成することも可能ですが、あらかじめ用意されたものを利用することもできます。
左下の「Library」から選択します。

チェックのパターン

アーガイルのパターン

タータンチェックのパターン

作成したパターンは「Code」タブにコードが生成されます。

[ad#ad-2]

生成したパターンの利用方法

ページに利用する際は、下記のように記述します。

外部ファイル

「patternizer.js」を外部ファイルとして指定します。

<script type="text/javascript" src="patternizer.js"></script>

HTML

ページ内に空のcanvas要素を配置します。

<canvas id="bgCanvas"></canvas>
 
<div class="wrapper">
    <div class="content-wrapper">
        <!-- Content here -->
    </div>
</div>

CSS

背景を固定表示にするために「position: fixed;」を指定し、コンテンツは「position: absolute;」と「left: 0px;right: 0px;」を指定します。

#bgCanvas {
    position: fixed;
}
 
.wrapper {
    position: absolute;
    left: 0px;
    right: 0px;
}
 
.content-wrapper {
    width: 920px;
    margin: 40px auto;
    padding: 30px;
    background-color: #fff;
}

JavaScript

ページで生成されたコードを使用して、下記のように記述します。

var bgCanvas = document.getElementById('bgCanvas');

function render() {

bgCanvas.patternizer({
stripes : [
{
color: '#ffb4d5',
rotation: 45,
opacity: 80,
mode: 'normal',
width: 30,
gap: 10,
offset: 0
},
{
color: '#3a83d6',
rotation: 200,
opacity: 50,
mode: 'plaid',
width: 10,
gap: 10,
offset: 0
}
],
bg : '#ffffff'
});

}

// resize the canvas to the window size
function onResize() {

// number of pixels of extra canvas drawn
var buffer = 100;

// if extra canvas size is less than the buffer amount
if (bgCanvas.width - window.innerWidth < buffer || bgCanvas.height - window.innerHeight < buffer) { // resize the canvas to window plus double the buffer bgCanvas.width = window.innerWidth + (buffer * 2); bgCanvas.height = window.innerHeight + (buffer * 2); render(); } } function init() { onResize(); // create a listener for resize // cowboy's throttle plugin keeps this event from running hog wild window.addEventListener('resize', Cowboy.throttle(200, onResize), false); } init(); [/javascript]

IEの古いバージョンへの対応

IEの古いバージョン（IE7/8）は現在サポートされていませんが、サポートする更新を計画している、とのことです。