91 lines
3.0 KiB
HTML
91 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Logo pixel art</title>
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
height: 100%;
|
|
background: #000000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
canvas {
|
|
image-rendering: pixelated;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="art"></canvas>
|
|
<script>
|
|
const CELL = 20;
|
|
const COLOR = "#d57353";
|
|
// Grille generee automatiquement a partir de l'image source
|
|
// (detection auto de la taille de cellule + de l'alignement).
|
|
const grid = [
|
|
"............................................",
|
|
"............................................",
|
|
"............................................",
|
|
"............................................",
|
|
"............................................",
|
|
"............................................",
|
|
".....................###....................",
|
|
".....................###....................",
|
|
"......................#.....................",
|
|
"......................#.....................",
|
|
"......................#.....................",
|
|
"......................##....................",
|
|
"..............#################.............",
|
|
"..............##################............",
|
|
"..............##################............",
|
|
"..............##################............",
|
|
".............####################...........",
|
|
"............#####..#######..######..........",
|
|
"............#####..#######..######..........",
|
|
".......#.#..#####..#######..######..........",
|
|
".......####.#####..#######..######..........",
|
|
".......###...####..#######..#####...........",
|
|
"........##....##################............",
|
|
"........##....######.###.#######............",
|
|
"........##....#######...########............",
|
|
"........###....################.............",
|
|
".........####..################.............",
|
|
"..........#######################...........",
|
|
"............######################..........",
|
|
"...............################.##..........",
|
|
"...............################.##..........",
|
|
"...............################.##..........",
|
|
"...............#####......#####.##..........",
|
|
"...............####.......#####.#...........",
|
|
"................###.......###...............",
|
|
"................###.......###...............",
|
|
"...............####.......#####.............",
|
|
"............................................",
|
|
"............................................",
|
|
"............................................",
|
|
"............................................",
|
|
"............................................",
|
|
"............................................",
|
|
"............................................"
|
|
];
|
|
|
|
const canvas = document.getElementById("art");
|
|
const cols = grid[0].length;
|
|
const rows = grid.length;
|
|
canvas.width = cols * CELL;
|
|
canvas.height = rows * CELL;
|
|
const ctx = canvas.getContext("2d");
|
|
ctx.fillStyle = COLOR;
|
|
for (let r = 0; r < rows; r++) {
|
|
for (let c = 0; c < cols; c++) {
|
|
if (grid[r][c] === "#") {
|
|
ctx.fillRect(c * CELL, r * CELL, CELL, CELL);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|