function generateNames() {
// Canvas initialisieren
const canvas = document.getElementById('canvas');
canvas.width = 400;
canvas.height = 400;
const ctx = canvas.getContext('2d');
// Hintergrundbild laden
const img = new Image();
img.src = 'image.png';
img.onload = function() {
// Hintergrundbild zeichnen
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
// Namen generieren
const names1 = [];
const names2 = [];
const names3 = [];
for (let i = 1; i <= 5; i++) {
const name1 = document.getElementById(`name1-${i}`).value;
if (name1) names1.push(name1);
const name2 = document.getElementById(`name2-${i}`).value;
if (name2) names2.push(name2);
const name3 = document.getElementById(`name3-${i}`).value;
if (name3) names3.push(name3);
}
// Namen auf dem Canvas zeichnen
const fontSize = 14;
const x1 = canvas.width / 2;
const y1 = canvas.height / 1.2;
const x2 = canvas.width * 0.2;
const y2 = canvas.height / 1.2;
const x3 = canvas.width * 0.78;
const y3 = canvas.height / 1.23;
ctx.font = `${fontSize}px Arial`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// Namen in 3D zeichnen
ctx.font = `bold ${fontSize}px Arial`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = 'white';
ctx.shadowColor = 'black';
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
// Platz 1 Namen
ctx.fillStyle = 'gold';
for (let i = 0; i < names1.length; i++) {
const name = names1[i];
const y = y1 + (i - (names1.length - 1) / 2) * fontSize;
ctx.fillText(name, x1, y);
}
// Platz 2 Namen
ctx.fillStyle = 'silver';
for (let i = 0; i < names2.length; i++) {
const name = names2[i];
const y = y2 + i * fontSize;
ctx.fillText(name, x2, y);
}
// Platz 3 Namen
ctx.fillStyle = '#CD7F32';
for (let i = 0; i < names3.length; i++) {
const name = names3[i];
const y = y3 + i * fontSize;
ctx.fillText(name, x3, y);
}
// Kreiert Download
function downloadImage() {
const canvas = document.getElementById('canvas');
const dataURL = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.download = 'ranking.png';
link.href = dataURL;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
};
}
![[Bild: 20230227145401d2b5ca33bd970f64a6301fa75ae2eb22.png]](https://javascript-forum.de/uploads/userpics/20230227145401d2b5ca33bd970f64a6301fa75ae2eb22.png)
Anfänger-Verständnisfrage