动态边框线

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var LineDemo = (function() {

var $win = $(window);

var points;
	var context;
	var totalLines;
	var depth;
	var resizeInterval;

var settings = {
		fontFamily: 'Arial',
		fontSize: '500px',
		fontStyle: 'normal',
		fontWeight: 900,
		height: $win.height(),
		lineHeight: 10,
		maxDepth: 8,
		text: '2D',
		width: $win.width()
	};

var init = function(options) {

settings = $.extend({}, settings, options);

context = setCanvas(document.createElement('canvas'), settings.width, settings.height);

if(settings.image) {
			var x = (settings.width - settings.image.width) * 0.5;
			var y = (settings.height - settings.image.height) * 0.5;
			context.drawImage(settings.image, x, y, settings.image.width, settings.image.height);
		}
		else {
			context = setCanvas(document.createElement('canvas'), settings.width, settings.height);
			context.fillStyle = 'black';
			context.beginPath();
			context.font = settings.fontStyle + ' ' + settings.fontWeight + ' ' + settings.fontSize + ' ' + settings.fontFamily;
			context.textAlign = 'center';
			context.textBaseline = 'middle';
			context.fillText(settings.text, settings.width * 0.5, settings.height * 0.5);
			context.fill();
			context.closePath();
		}

setup();
	};

var setup = function() {
    
    settings.height = Math.max(100, settings.height);
    settings.width = Math.max(100, settings.width);

totalLines = Math.floor(settings.height / settings.lineHeight);
    
		settings.lineHeight = settings.height / totalLines;

generatePoints(context, settings.width, totalLines, settings.lineHeight);

context = setCanvas(document.getElementById('canvas'), settings.width, settings.height);
		depth = settings.maxDepth;
		draw();

$win.on('mousemove', function(event) {
			depth = settings.maxDepth * ((settings.height - event.pageY) / settings.height);
			draw();
		});

$win.on('resize', function(event) {
			if(resizeInterval) clearTimeout(resizeInterval);
			resizeInterval = setTimeout(function() {
				settings.height = $win.height();
				settings.width = $win.width();
				init();
			}, 50);
		});
	};

var generatePoints = function() {
		points = [];
		var data;
		for(var y = 0; y < totalLines; ++y) {
			data = context.getImageData(0, y * settings.lineHeight, settings.width, 1).data;
			points[y] = getPointsRow(data, y * settings.lineHeight);
		}
	};

var getDrawPoints = function(rowPoints) {
		var row = [];

var x, y, diff, newX;

var point1 = depth;
		var point2 = depth * 0.5;

for(var i = 0; i < rowPoints.length; ++i) {

x = rowPoints[i].x;
			y = rowPoints[i].y;

if(i % 2 === 0) {

row[row.length] = {
					cx: x - point1,
					cy: y,
					x: x - point1,
					y: y
				};

if(row.length >= 2 && row[row.length-1].x < row[row.length-2].x) {
					diff = row[row.length-2].x - row[row.length-1].x;
					newX = row[row.length-1].x + (diff * 0.5);
					row[row.length-1].x = row[row.length-2].x = newX;
					row[row.length-1].cx = row[row.length-2].cx = newX;
				}

row[row.length] = {
					cx: x - point2,
					cy: y,
					x: x,
					y: y - (depth * 0.5)
				};

row[row.length] = {
					cx: x + point2,
					cy: y - depth,
					x: x + point1,
					y: y - depth
				};

}
			else {

row[row.length] = {
					cx: x - point1,
					cy: y - depth,
					x: x - point1,
					y: y - depth
				};

row[row.length] = {
					cx: x - point2,
					cy: y - depth,
					x: x,
					y: y - (depth * 0.5)
				};

row[row.length] = {
					cx: x + point2,
					cy: y,
					x: x + point1,
					y: y
				};
			}
		}

return row;
	};

var draw = function() {
		context.clearRect(0, 0, settings.width, settings.height);
		context.strokeStyle = 'white';
		context.lineWidth = 2;
		var row;

for(var i = 1; i < totalLines; ++i) {

context.globalAlpha = (1 - i / totalLines) * 0.6;
			context.beginPath();
			context.moveTo(0, i * settings.lineHeight);

row = getDrawPoints(points[i]);

for(var j = 0; j < row.length; ++j) {
				context.quadraticCurveTo(row[j].cx, row[j].cy, row[j].x, row[j].y);
			}

context.lineTo(settings.width, i * settings.lineHeight);
			context.stroke();
		}
	};

var setCanvas = function(canvas, width, height) {
		canvas.width = width;
		canvas.height = height;
		return canvas.getContext('2d');
	};

return {
		'init': init
	};
});

if($('img').length) {
	var img = new Image();
	img.addEventListener('load', function() {
		new LineDemo().init({
			image: this
		});
	}, false);
	img.src = $('img')[0].src;
}
else if($('span').length) {
	new LineDemo().init({
		fontSize: '340px',
		text: $('span').html()
	});
}
else {
  new LineDemo().init();
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg