そもそも

白ベースのサイトをつくるときに背景が物足りないなぁと感じたのでつくろうと思った。

ちなみに筆者はcanvasとかプラグインをつくるのは初めてで間違ってるとことかもあると思うのであしからず。

こんな感じになる

使い方

ライン自体はhtmlのcanvasで描いているので<canvas></canvas>タグを用意する。このとき、<canvas>タグを親要素で囲うことに注意！

canvasの縦・横は親要素のサイズに合わせるので、そうする。

<div id=”wire_parent” style=”width:100%;height:100vh”><canvas id=”target”></canvas></div>

            “parent”: $(“#thin_parent”),

            “num”: 5,

            “thickness”: 1,

            “color”: ‘#000’,

ソース

(function($) {

    $.fn.Wire = function(options) {

        var settings = $.extend({

            “parent”: $(“#thin_parent”),

            “num”: 5,

            “thickness”: 1,

            “color”: ‘#000’,

        }, options);

        var _method = {

            _this: this,

            size: function() {

                return [settings.parent.width(), settings.parent.height()];

            },

            init: function(context) {

                var size = this.size();

                this._this.attr(“width”, size[0]);

                this._this.attr(“height”, size[1]);

                this.draw(context);

            },

            draw: function(context) {

                var size = this.size();

                context.beginPath();

                for(var i=0; i<settings.num; i++) {

                    var pattern = _method.limit(100, 1);

                    if(pattern % 2 == 0) {

                        context.moveTo(this.limit(size[0], 0), size[1]);

                        context.lineTo(this.limit(size[0], 0), -size[1]);

                    } else {

                        context.moveTo(size[0], this.limit(size[1], 0));

                        context.lineTo(-size[0], this.limit(size[1], 0));

                    }

                }

                context.strokeStyle = settings.color;

                context.lineWidth = settings.thickness;

                context.stroke();

            },

            limit: function(max, min) {

                return Math.floor(Math.random()*(max – min) + min);

            }

        };

        var self = this;

         $(window).on(“load resize”, function() {

            _method.init(self.get(0).getContext(“2d”));

        });

    };

}(jQuery));

$(“#target”).Wire();

$(“#target”).Wire({

            “parent”: $(“#hogehoge”),

            “num”: 100,

            “thickness”: 1,

            “color”: ‘#444’,

});