|
|
| 第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: '注意!', |