• かちびと.net

    HTML5のCanvasを使ったパターン背景を簡単に作成出来るWebサービス・Patternizerのご紹介。実用性はまだありませんけど、HTML5 Canvasの勉強をこれからしたいというかたはためしにいかがですか。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

HTML5のCanvasを使ったパターン背景を簡単に作成出来るWebサービス・Patternizer

スポンサーリンク

珍しいなぁと思ったのでメモがてらご紹介です。
HTML5のCanvasを使用してパターン背景を
生成出来る、というWebサービス。線を描いて
数枚重ね、パターンのような背景を作成する
ことが出来ます。まだ実用段階とは行きません
けど。

簡単にHTML5製の背景を作成出来るジェネレーターです。Canvasは非プログラマーにとっては若干ハードルが高い印象ですので、この手のジェネレーターで使い方を覚えていくのもいいかもしれません。

Patternizer


こんな感じ。線の太さ、角度などを調整し、複数の線の連続を重ねてパターンを生成します。


使い方はこんな感じ。直感で分かるんじゃないですかね。

使い方

まず、patternizer.jsというスクリプトを読み込みます。

<script src="js/patternizer.js"></script>

で、マークアップ

<canvas id="bgCanvas"></canvas>
<div class="wrapper">
    <div class="content-wrapper">
        <!-- コンテンツ -->
    </div>
</div>

canvasをfixed指定します。

#bgCanvas {
    position: fixed;
}

.wrapper {
    position: absolute;
    left: 0px;
    right: 0px;
}

.content-wrapper {
    width: 920px;
    margin: 40px auto;
    padding: 30px;
    background-color: #fff;
}

あとは先ほど作ったジェネレーターで生成されたコードを使う。

<script>
var bgCanvas = document.getElementById('bgCanvas');

function render() {

    bgCanvas.patternizer({
        {
stripes : [
    {
        color: '#bebac2',
        rotation: 335,
        opacity: 50,
        mode: 'normal',
        width: 3,
        gap: 130,
        offset: 286
    },
    {
        color: '#bfbac2',
        rotation: 25,
        opacity: 50,
        mode: 'normal',
        width: 3,
        gap: 98,
        offset: 123
    },
    {
        color: '#3e122c',
        rotation: 25,
        opacity: 60,
        mode: 'normal',
        width: 100,
        gap: 100,
        offset: 156
    },
    {
        color: '#3e122c',
        rotation: 335,
        opacity: 60,
        mode: 'normal',
        width: 100,
        gap: 100,
        offset: 156
    }
],
bg : '#d1d1b6'
});
}

function onResize() {
    var buffer = 100;

    if (bgCanvas.width - window.innerWidth < buffer ||
        bgCanvas.height - window.innerHeight < buffer) {
        bgCanvas.width = window.innerWidth + (buffer * 2);
    	bgCanvas.height = window.innerHeight + (buffer * 2);

    	render();
    }	

}

function init() {
    onResize();
    window.addEventListener('resize', Cowboy.throttle(200, onResize), false);
}

init();

</script>

まぁ実用性はあんまり感じませんけど、勉強にはいいかもですね。以下よりどうぞ。

Patternizer(via:webresourcesdepot)

URL :
TRB :

Comments & Trackbacks (33)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services