想要給textarea添加一個背景圖來實現 但是背景圖有幾個問題, 1、每個div或者textarea的line-height不一樣,對於每個不同的line-height都需要一個不同的背景圖 2、當有滾動條出現時,拉動滾動條背景圖分割線不會變,導致樣式錯位 因此使用傳統的圖片作為背景圖不可行,因為 ...
想要給textarea添加一個背景圖來實現
但是背景圖有幾個問題,
1、每個div或者textarea的line-height不一樣,對於每個不同的line-height都需要一個不同的背景圖
2、當有滾動條出現時,拉動滾動條背景圖分割線不會變,導致樣式錯位
因此使用傳統的圖片作為背景圖不可行,因為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);