1、css样式
body {
background: #222222;
}
.morph-section {
width: 400px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -200px;
margin-left: -200px;
font-family: monospace;
color: #fff;
}
.info {
font-family: monospace;
position: absolute;
line-height: 20px;
font-size: 14px;
left: 20px;
bottom: 20px;
color: #fff;
}
a {
color: #f9f9f9;
}
2、html代码
<pre class="morph-section"></pre>
3、js代码
var AsciiMorph = (function() {
'use strict';
var element = null;
var canvasDimensions = {};
var renderedData = [];
var framesToAnimate = [];
var myTimeout = null;
function extend(target, source) {
for (var key in source) {
if (!(key in target)) {
target[key] = source[key];
}
}
return target;
}
function repeat(pattern, count) {
if (count < 1) return '';
var result = '';
while (count > 1) {
if (count & 1) result += pattern;
count >>= 1, pattern += pattern;
}
return result + pattern;
}
function replaceAt(string, index, character ) {
return string.substr(0, index) + character + string.substr(index+character.length);
}
function init(el, canvasSize) {
// Save the element
element = el;
canvasDimensions = canvasSize;
}
function squareOutData(data) {
var i;
var renderDimensions = {
x: 0,
y: data.length
};
// Calculate centering numbers
for( i = 0; i < data.length; i++ ) {
if( data[i].length > renderDimensions.x) {
renderDimensions.x = data[i].length
}
}
// Pad out right side of data to square it out
for( i = 0; i < data.length; i++ ) {
if( data[i].length < renderDimensions.x) {
data[i] = (data[i] + repeat(' ', renderDimensions.x - data[i].length ));
}
}
var paddings = {
x: Math.floor((canvasDimensions.x - renderDimensions.x) / 2),
y: Math.floor((canvasDimensions.y - renderDimensions.y) / 2)
}
// Left Padding
for( var i = 0; i < data.length; i++ ) {
data[i] = repeat(' ', paddings.x) + data[i] + repeat(' ', paddings.x);
}
// Pad out the rest of everything
for( var i = 0; i < canvasDimensions.y; i++ ) {
if( i < paddings.y) {
data.unshift( repeat(' ', canvasDimensions.x));
} else if (i > (paddings.y + renderDimensions.y)) {
data.push( repeat(' ', canvasDimensions.x));
}
}
return data;
}
// Crushes the frame data by 1 unit.
function getMorphedFrame(data) {
var firstInLine, lastInLine = null;
var found = false;
for( var i = 0; i < data.length; i++) {
var line = data[i];
firstInLine = line.search(/\S/);
if( firstInLine === -1) {
firstInLine = null;
}
for( var j = 0; j < line.length; j++) {
if( line[j] != ' ') {
lastInLine = j;
}
}
if( firstInLine !== null && lastInLine !== null) {
data = crushLine(data, i, firstInLine, lastInLine)
found = true;
}
firstInLine = null, lastInLine = null;
}
if( found ) {
return data;
} else {
return false;
}
}
function crushLine(data, line, start, end) {
var centers = {
x: Math.floor(canvasDimensions.x / 2),
y: Math.floor(canvasDimensions.y / 2)
}
var crushDirection = 1;
if( line > centers.y ) {
crushDirection = -1;
}
var charA = data[line][start];
var charB = data[line][end];
data[line] = replaceAt(data[line], start, " ");
data[line] = replaceAt(data[line], end, " ");
if( !((end - 1) == (start + 1)) && !(start === end) && !((start + 1) === end)) {
data[line + crushDirection] = replaceAt(data[line + crushDirection], (start + 1), '+*/\\'.substr(Math.floor(Math.random()*'+*/\\'.length), 1));
data[line + crushDirection] = replaceAt(data[line + crushDirection], (end - 1), '+*/\\'.substr(Math.floor(Math.random()*'+*/\\'.length), 1));
} else if ((((start === end) || (start + 1) === end)) && ((line + 1) !== centers.y && (line - 1) !== centers.y && line !== centers.y)) {
data[line + crushDirection] = replaceAt(data[line + crushDirection], (start), '+*/\\'.substr(Math.floor(Math.random()*'+*/\\'.length), 1));
data[line + crushDirection] = replaceAt(data[line + crushDirection], (end), '+*/\\'.substr(Math.floor(Math.random()*'+*/\\'.length), 1));
}
return data;
}
function render(data) {
var ourData = squareOutData(data.slice());
renderSquareData(ourData);
}
function renderSquareData(data) {
element.innerHTML = '';
for( var i = 0; i < data.length; i++ ) {
element.innerHTML = element.innerHTML + data[i] + '\n';
}
renderedData = data;
}
// Morph between whatever is current, to the new frame
function morph(data) {
clearTimeout(myTimeout);
var frameData = prepareFrames(data.slice());
animateFrames(frameData);
}
function prepareFrames(data) {
var deconstructionFrames = [];
var constructionFrames = [];
var clonedData = renderedData
// If its taking more than 100 frames, its probably somehow broken
// Get the deconscrution frames
for(var i = 0; i < 100; i++) {
var newData = getMorphedFrame(clonedData);
if( newData === false) {
break;
}
deconstructionFrames.push(newData.slice(0));
clonedData = newData;
}
// Get the constuction frames for the new data
var squareData = squareOutData(data);
constructionFrames.unshift(squareData.slice(0));
for( var i = 0; i < 100; i++ ) {
var newData = getMorphedFrame(squareData);
if( newData === false) {
break;
}
constructionFrames.unshift(newData.slice(0));
squareData = newData;
}
return deconstructionFrames.concat(constructionFrames)
}
function animateFrames(frameData) {
framesToAnimate = frameData;
animateFrame();
}
function animateFrame() {
myTimeout = setTimeout(function() {
renderSquareData(framesToAnimate[0]);
framesToAnimate.shift();
if( framesToAnimate.length > 0 ) {
animateFrame();
}
}, 20)
// framesToAnimate
}
function main(element, canvasSize) {
if( !element || !canvasSize ) {
console.log("sorry, I need an element and a canvas size");
return;
}
init(element, canvasSize);
}
return extend(main, {
render: render,
morph: morph
});
})();
var element = document.querySelector('pre');
AsciiMorph(element, {x: 51,y: 28});
var asciis = [[
" _ooOoo_",
" o8888888o",
" 88\" . \"88",
" (| -_- |)",
" O\\ = /O",
" ____/`---'\\____",
" .' \\\\| |// `.",
" / \\\\||| : |||// \\",
" / _||||| -:- |||||_ \\",
" | | \\\\\\ - /'| | |",
" | \\_| `\\`---'// |_/ |",
" \\ .-\\__ `-. -'__/-. /",
" ___`. .' /--.--\\ `. .'___",
" .\"\" '< `.___\\_<|>_/___.' _> \\\"\".",
" | | : `- \\`. ;`. _/; .'/ / .' ; |",
" \\ \\ `-. \\_\\_`. _.'_/_/ -' _.' /",
"===`-.`___`-.__\\ \\___ /__.-'_.'_.-'===",
" `=--=-' "
],
[
" /",
" /",
" /;",
" //",
" ;/",
" ,//",
" _,-' ;_,,",
" _,'-_ ;|,'",
" _,-'_,..--. |",
" ___ .'-'_)' ) _)\\| ___",
" ,'\"\"\"`'' _ ) ) _) ''--'''_,-'",
"-={-o- /| ) _) ) ; '_,--''",
" \\ -' ,`. ) .) _)_,''|",
" `.\"( `------'' /",
" `.\\ _,'",
" `-.____....-\\\\",
" || \\\\",
" // ||",
" // ||",
" _-.//_ _||_,",
" ,' ,-'/"
],
[
" \\`. ___",
" \\ \\ / __>0",
" /\\ / |/' / ",
" / \\/ ` ,`'--.",
" / /(___________)_ \\",
" |/ //.-. .-.\\\\ \\ \\",
" 0 // :@ ___ @: \\\\ \/",
" ( o ^(___)^ o ) 0",
" \\ \\_______/ /",
"/\\ '._______.'--.",
"\\ /| |<_____> |",
" \\ \\__|<_____>____/|__",
" \\____<_____>_______/",
" |<_____> |",
" |<_____> |",
" :<_____>____:",
" / <_____> /|",
" / <_____> / |",
" /___________/ |",
" | | _|__",
" | | ---||_",
" | |L\\/|/ | | [__]",
" | \\|||\\|\\ | /",
" | | /",
" |___________|/"
],
[
" .--------.",
" / .------. \\",
" / / \\ \\",
" | | | |",
" _| |________| |_",
".' |_| |_| '.",
"'._____ ____ _____.'",
"| .'____'. |",
"'.__.'.' '.'.__.'",
"'.__ | | __.'",
"| '.'.____.'.' |",
"'.____'.____.'____.'",
"'.________________.'",
],
[
" ____",
" o8%8888,",
" o88%8888888.",
" 8'- -:8888b",
" 8' 8888",
" d8.-=. ,==-.:888b",
" >8 `~` :`~' d8888",
" 88 ,88888",
" 88b. `-~ ':88888",
" 888b ~==~ .:88888",
" 88888o--:':::8888",
" `88888| :::' 8888b",
" 8888^^' 8888b",
" d888 ,%888b.",
" d88% %%%8--'-.",
"/88:.__ , _%-' --- -",
" '''::===..-' = --. `",
],
[
" _ _ _",
" __(.)< __(.)> __(.)=",
" \\___) \\___) \\___) ",
" _ _ _",
" __(.)< __(.)> __(.)=",
" \\___) \\___) \\___) ",
" _ _ _",
" __(.)< __(.)> __(.)=",
" \\___) \\___) \\___) ",
" _ _ _",
" __(.)< __(.)> __(.)=",
" \\___) \\___) \\___) "
]];
AsciiMorph.render(asciis[0]);
var currentIndex = 2;
setTimeout(function() {
AsciiMorph.morph(asciis[1]);
}, 1000);
setInterval(function() {
AsciiMorph.morph(asciis[currentIndex]);
currentIndex++;
currentIndex%= asciis.length;
}, 3000);
标签： ascii
上面是“用ascii字符画图像”的全面内容，想了解更多关于 好玩 内容，请继续关注web建站教程。
当前网址：https://m.ipkd.cn/webs_89.html
声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！
