像紙質筆記本同樣給div,textarea添加行的分割線

想要給textarea添加一個背景圖來實現

可是背景圖有幾個問題，

一、每一個div或者textarea的line-height不同，對於每一個不一樣的line-height都須要一個不一樣的背景圖

二、當有滾動條出現時，拉動滾動條背景圖分割線不會變，致使樣式錯位

所以使用傳統的圖片做爲背景圖不可行，由於line-height是變化的，而且有滾動條的時候背景圖也應該變化。

問題找到了，就要找到解決問題的訪問，那就是使用canvas動態生成背景圖。

具體不用講解了，看代碼，作成了一個jquery插件的形式。

直接調用$("textarea,div").backgroundLine();就行

截個圖：

 

(function ($) { 
    var  setBG=function(_this) {
        if ($(_this).css("visibility") == "hidden" || $(_this).css("display") == "none" )
            return;
        var lineHeight = parseFloat($(_this).css("line-height"));
        if (isNaN(lineHeight)) {
            lineHeight = 25;
            $(_this).css("line-height", lineHeight + "px");
        }
        var padding = $(_this).scrollTop() % lineHeight;
        var bgimg = createBG(lineHeight, padding);
        if (bgimg != null) {
            $(_this).css("background", "url(" + bgimg + ")   repeat");
            $(_this).on("scroll", function () {
                var lineHeight = parseFloat($(_this).css("line-height"));
                var padding = $(_this).scrollTop() % lineHeight;
                var bgimg = createBG(lineHeight, padding);
                $(_this).css("background", "url(" + bgimg + ") left top repeat");
            });
        }
    } 
    this.___BGList = {};
    var createBG=function( height, padding) {
        var key = height + "-" + padding; 
        var width = 4;
        if (this.___BGList[key] != null) {
            return this.___BGList[key];
        }
        var canvas = document.createElement("canvas");
        if (canvas.getContext) {
            var context = canvas.getContext("2d");
            canvas.width = width;
            canvas.height = height;
            canvas.lineWidth = 1;
            canvas.fillStyle = "#000000";
            context.fillRect(0, height - padding - 1, 1, 1);
            var dataURL = canvas.toDataURL('image/png'); 
            this.___BGList[key] = dataURL;
            return dataURL;
        }
        return null;
    }
    $.fn.backgroundLine = function (options) {
        this.each(function () { 
            setBG(this);
        });
    };
})(jQuery);