Browse Source

draw imprint as canvas

master
Milan 1 year ago
parent
commit
5217e8d476
3 changed files with 47 additions and 9 deletions
  1. +43
    -2
      footer.js
  2. +1
    -1
      index.html
  3. +3
    -6
      style.css

+ 43
- 2
footer.js View File

@@ -1,3 +1,44 @@
'use strict';
"use strict";

const footer = document.getElementById("footer");
const canvas = document.getElementById("imprint");
const ctx = canvas.getContext("2d");

const draw = () => {
canvas.width = footer.clientWidth;
ctx.font = "14px sans-serif";

const words = decodeURIComponent(Array.prototype.map.call(atob("TGVnYWwgY29udGFjdDogTWlsYW4gUMOkc3NsZXIsIEFtIFN0YWRlcmhvZiA4YSA0Mjc5OSBMZWljaGxpbmdlbiwgRW1haWw6IG1lQHBiYi5sYwo="), function(c) { return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2); }).join("")).split(" ");
let lines = [""];
let i = 0;

console.log("!")
while (words.length) {
while (words.length) {
if (ctx.measureText(lines[i] + words[0]).width < canvas.width) {
lines[i] += words.shift() + " ";
} else {
break;
}
}
lines.push("");
i++;
}

canvas.height = lines.length * 25;
ctx.font = "14px sans-serif";
ctx.fillStyle = "white";
ctx.textAlign = "center";

ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < lines.length; i++) {
ctx.fillText(lines[i], canvas.width/2, (i+1) * 25);
}
};

window.addEventListener("resize", () => {
draw();
});

window.onready = draw();

document.getElementById('footer').innerHTML = decodeURIComponent(Array.prototype.map.call(atob('TGVnYWwgY29udGFjdDogTWlsYW4gUMOkc3NsZXIsIEFtIFN0YWRlcmhvZiA4YSA0Mjc5OSBMZWljaGxpbmdlbiwgRW1haWw6IG1lQHBiYi5sYwo='), function(c) { return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2); }).join(''));

+ 1
- 1
index.html View File

@@ -30,7 +30,7 @@
<img src="email.svg" class="link">
</a>
</div>
<p id="footer"></p>
<p id="footer"><canvas id="imprint"></canvas></p>
</div>
<script type="text/javascript" src="footer.js"></script>
<!-- <canvas id="canvas"></canvas>


+ 3
- 6
style.css View File

@@ -11,7 +11,7 @@ body {
#content {
text-align: center;
background-color: rgba(0, 0, 0, .6);
width: 100vw;
width: 100%;
max-width: 550px;
min-height: 100vh;
margin: auto;
@@ -22,8 +22,9 @@ body {
}

#footer {
font-size: .8em;
margin: 10px;
width: 100%;
display: flex;
}

#profile {
@@ -48,10 +49,6 @@ img.link {
height: 100px;
}

canvas {
position: fixed;
}

@media (max-width: 600px) {
#profile {
width: 60vmin;


Loading…
Cancel
Save