“Chemdah 用户文档目录”的版本间的差异
来自Purtmars Wikipedia —— 普特莫斯维基
第2行: | 第2行: | ||
<html> | <html> | ||
<script> | <script> | ||
+ | (function() { | ||
+ | |||
+ | var watermark = function(self) { | ||
+ | this.elem = self; | ||
+ | } | ||
+ | |||
+ | watermark.prototype = { | ||
+ | options: { | ||
+ | canvas: [] | ||
+ | }, | ||
+ | init: function(options) { | ||
+ | $.extend(this.options, this.defaults, options); | ||
+ | var $body = $('body'), | ||
+ | can1 = this.__createCanvas($body), | ||
+ | can2 = this.__createCanvas($body), | ||
+ | canAll = this.__createCanvas($body), | ||
+ | settings = this.options, | ||
+ | txtlen = settings.texts.length; | ||
+ | settings.deg = settings.textRotate * Math.PI / 180; | ||
+ | this.__calcTextSize($body); | ||
+ | var repeatTimes = Math.ceil(screen.width / settings.txts.length / settings.width); | ||
+ | settings.canvasWidth = settings.canvasWidth * repeatTimes; | ||
+ | var extTxts = []; | ||
+ | while (repeatTimes--) | ||
+ | extTxts = extTxts.concat(settings.txts); | ||
+ | settings.txts = extTxts; | ||
+ | |||
+ | var fixH = settings.maxWidth * Math.abs(Math.sin(settings.deg)) + Math.cos(settings.deg) * settings.textHeight; | ||
+ | if (fixH > settings.height) | ||
+ | settings.height = fixH; | ||
+ | var ctx1 = this.__setCanvasStyle(can1, settings.canvasWidth, settings.height); | ||
+ | var ctx2 = this.__setCanvasStyle(can2, settings.canvasWidth, settings.height); | ||
+ | var ctx = this.__setCanvasStyle(canAll, settings.canvasWidth, settings.height * 2, true); | ||
+ | |||
+ | this.__drawText(ctx1, settings.txts); | ||
+ | this.__drawText(ctx2, settings.txts.reverse()); | ||
+ | ctx.drawImage(can1, 0, 0, settings.canvasWidth, settings.height); | ||
+ | ctx.drawImage(can2, 0, settings.height, settings.canvasWidth, settings.height); | ||
+ | var dataURL = canAll.toDataURL("image/png"); | ||
+ | $(this.elem).css('backgroundImage', "url(" + dataURL + ")"); | ||
+ | }, | ||
+ | __createCanvas: function($container) { | ||
+ | var canvas = document.createElement('canvas'); | ||
+ | $container.append(canvas); | ||
+ | this.options.canvas.push(canvas); | ||
+ | return canvas; | ||
+ | }, | ||
+ | __calcTextSize: function($container) { | ||
+ | var txts = [], | ||
+ | maxWidth = 0, | ||
+ | canvasWidth = 0, | ||
+ | settings = this.options; | ||
+ | $.each(settings.texts, function(i, text) { | ||
+ | var span = $('<span style="font:' + settings.textFont + ';visibility: hidden;display: inline-block;"> ' + text + '</span>') | ||
+ | .appendTo($container); | ||
+ | var tWidth = span[0].offsetWidth, | ||
+ | tHeight = span[0].offsetHeight; | ||
+ | span.remove(); | ||
+ | txts.push({ | ||
+ | txt: text, | ||
+ | width: tWidth, | ||
+ | height: tHeight | ||
+ | }); | ||
+ | maxWidth = Math.max(maxWidth, tWidth); | ||
+ | settings.textHeight = tHeight; | ||
+ | var shadow = Math.cos(settings.deg) * tWidth; | ||
+ | canvasWidth += (settings.width < shadow ? shadow : settings.width) - tHeight * Math.sin(settings.deg); | ||
+ | }); | ||
+ | settings.txts = txts; | ||
+ | settings.maxWidth = maxWidth; | ||
+ | settings.canvasWidth = canvasWidth; | ||
+ | }, | ||
+ | __setCanvasStyle: function(canvas, width, height, notextstyle) { | ||
+ | canvas.width = width; | ||
+ | canvas.height = height; | ||
+ | canvas.style.display = 'none'; | ||
+ | |||
+ | var ctx = canvas.getContext('2d'); | ||
+ | if (!notextstyle) { | ||
+ | var deg = this.options.deg, | ||
+ | absSindeg = Math.abs(Math.sin(deg)); | ||
+ | ctx.rotate(deg); | ||
+ | var offset = absSindeg * this.options.height - this.options.textHeight * absSindeg; | ||
+ | var nx = -offset * Math.cos(deg), | ||
+ | ny = -offset * absSindeg; | ||
+ | ctx.translate(nx, ny * absSindeg); | ||
+ | |||
+ | ctx.font = this.options.textFont; | ||
+ | ctx.fillStyle = this.options.textColor; | ||
+ | ctx.textAlign = 'left'; | ||
+ | ctx.textBaseline = 'Middle'; | ||
+ | } | ||
+ | return ctx; | ||
+ | }, | ||
+ | __drawText: function(ctx, txts) { | ||
+ | var settings = this.options; | ||
+ | $.each(txts, function(i, obj) { | ||
+ | |||
+ | var wnap = (settings.maxWidth - obj.width) / 2; | ||
+ | var x = settings.width * Math.cos(settings.deg) * i, | ||
+ | y = -x * Math.tan(settings.deg) + settings.height; | ||
+ | ctx.fillText(obj.txt, x + wnap, y); | ||
+ | }); | ||
+ | }, | ||
+ | __destory: function() { | ||
+ | $.each(this.options.canvas, function(i, canvas) { | ||
+ | canvas.remove(); | ||
+ | canvas = null; | ||
+ | }); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | $.fn.watermark = function(options) { | ||
+ | new watermark(this).init(options); | ||
+ | } | ||
+ | |||
+ | })(jQuery); | ||
+ | |||
+ | $(document).ready(function() { | ||
+ | if ($("#pt-userpage a").html() != null) { | ||
+ | $('body').watermark({ | ||
+ | texts: [$("#pt-userpage a").html()], | ||
+ | textColor: "rgb(240, 240, 240)", | ||
+ | textFont: '16px 微软雅黑', | ||
+ | width: 300, | ||
+ | height: 200, | ||
+ | textRotate: -30 | ||
+ | }); | ||
+ | } | ||
+ | }); | ||
GrowlNotification.notify({ | GrowlNotification.notify({ | ||
title: '注意!', | title: '注意!', |
2021年4月30日 (五) 10:16的版本
目录
- 开始
- 基本