<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style>
/*
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700);
body {
font-family: 'Open Sans', sans-serif;
}
*/
body {
margin: 0;
overflow: hidden;
}
p {
color: #fff;
font-size: 1.4rem;
font-family: "Open Sans";
text-shadow:
0 0 0.4rem #000,
0 0 0.4rem #000,
0 0 0.4rem #000,
0 0 0.4rem #000,
0 0 0.4rem #000,
0 0 0.4rem #000,
;
margin: 0.1rem 0.5rem;
}
p strong {
font-size: 1.6rem;
}
#canvas {
/*
width: 1920px;
height: 1080px;
*/
width: 100%;
}
</style>
<body>
<canvas width="3840" height="200" id="canvas"></canvas>
<script>
function main () {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.scale(1, 1);
function prepareText(segments) {
var text = [];
var si, li, s, c, sc, f, ls, l, img;
segments.forEach(function(s) {
var symb = {};
if(s.i !== undefined) {
console.log(s.i);
symb.i = new Image();
symb.i.src = s.i;
symb.w = symb.i.width;
text.push(symb);
symb.i.onload = function() {
symb.w = symb.i.width;
};
return;
}
symb.c = s.c || '#eee';
symb.sc = s.sc || '#000';
symb.f = s.f || '400 44px Open Sans';
ctx.fillStyle = symb.c;
ctx.shadowColor = symb.sc;
ctx.font = symb.f;
s = s.s || s;
ls = s.split('');
for(li = 0; li < ls.length; li++) {
symb.l = ls[li];
symb.w = ctx.measureText(symb.l).width;
text.push(symb);
symb = {};
}
});
return text;
}
var text = prepareText([
{s: ' \uf099 ', c: '#5EA9DD', f: '400 44px FontAwesome'},
{s: '@killroy42', f: '400 44px Open Sans'},
{s: ' \uf11b ', c: '#3dc2ff', sc: '#0A1F29', f: '400 44px FontAwesome'},
{s: 'xenocideacademy.com', f: '400 44px Open Sans'},
{s: ' \uf09a ', c: '#3A579D', f: '400 44px FontAwesome'},
{s: 'facebook.com/xenocideacademy', f: '400 44px Open Sans'}
]);
function letterY(t, x, y) {
return Math.sin(t*0.003 + (x) * 0.01 + y) * 3;
}
function renderText(lineX, lineY, t, text) {
var i, ii, symb, x, y;
ctx.shadowBlur = 30;
x = lineX;
for(i = 0; i < text.length; i++) {
symb = text[i];
y = lineY+letterY(t, x, lineY);
if(symb.l) {
if(symb.sc) {
ctx.fillColor = symb.sc;
ctx.shadowColor = symb.sc;
}
if(symb.f) ctx.font = symb.f;
for(ii = 0; ii < 15; ii++) ctx.fillText(symb.l, x, y);
}
x += symb.w;
}
ctx.shadowBlur = 0;
x = lineX;
for(i = 0; i < text.length; i++) {
symb = text[i];
y = lineY+letterY(t, x, lineY);
if(symb.l) {
if(symb.c) ctx.fillStyle = symb.c;
if(symb.f) ctx.font = symb.f;
ctx.fillText(symb.l, x, y);
} else if(symb.i) {
ctx.drawImage(symb.i, x, y-symb.i.height*1.5, 64, 64);
}
x += symb.w;
}
}
function frameA(t) {
window.requestAnimationFrame(frameB);
ctx.clearRect(0, 0, canvas.width, canvas.height);
renderText(10, 60, t, text);
}
function frameB(t) {
window.requestAnimationFrame(frameA);
ctx.clearRect(0, 0, canvas.width, canvas.height);
renderText(10, 60, t, text);
}
window.requestAnimationFrame(frameA);
}
document.addEventListener('DOMContentLoaded', function() {
setTimeout(main, 2000);
});
</script>
</body>
</html>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.