Aufgabenstellung "Name"

Beispiel für Zeichnen auf dem Canvas. Zeigen Sie, dass Sie mit Koordinaten, Variablen, Funktionen, Schleifen und Zufallszahlen umgehen können!

by bjelline

HTML

<h1>Aufgabenstellung</h1>

<p>Schreibe ein Programm, das 10mal Ihren Namen zeichnet, und zwar an zufälliger
    Position</p>
<canvas id="c"></canvas>
<p>Tipp: Das Koordinatensystem des Canvas startet links oben.</p>
<p>Tipp: Drücke links oben auf "Run" und das vorhandene Programm neu zu starten.</p>

CSS

#c {
    background-color: green
}
body {
    background-color: #ddd;
}

JavaScript

var my_canvas = document.getElementById("c");
var my_context = my_canvas.getContext("2d");

my_canvas.width = 500;
my_canvas.height = 500;




function A(x1, y1, i) {
    my_context.moveTo(x1, y1 + i);
    my_context.lineTo(x1 + i / 2, y1);
    my_context.lineTo(x1 + i, y1 + i);
    my_context.moveTo(x1 + i / 4, y1 + i / 2);
    my_context.lineTo(x1 + 3 * i / 4, y1 + i / 2);
    my_context.stroke();
}

function M1(x1, y1, i) {
    my_context.moveTo(x1, y1 + i);
    my_context.lineTo(x1 + i / 2, y1);
    my_context.lineTo(x1 + i, y1 + i);
    my_context.moveTo(x1 + i / 4, y1 + i / 2);
    
    my_context.stroke();
}
function M2(x1, y1, i) {
    my_context.moveTo(x1, y1 + i);
    my_context.lineTo(x1 + i / 2, y1);
    my_context.lineTo(x1 + i, y1 + i);
    my_context.moveTo(x1 + i / 4, y1 + i / 2);
    
    my_context.stroke();
}

function X1(x1, y1, i) {
   my_context.lineTo(x1 + i / 2, y1);
   my_context.lineTo(x1 + i, y1 + i);
   my_context.stroke();
}

function X2(z1, d1, i) {
    my_context.moveTo(z1, d1 +i);
    my_context.lineTo(z1 + i / 2, d1);
    my_context.stroke();
}



x_zufall = Math.random() * 500;
y_zufall = Math.random() * 500;

M1(x_zufall+11.5, y_zufall, 10);
M2(x_zufall, y_zufall, 10);
A(x_zufall+25, y_zufall, 10);

X1(x_zufall+35, y_zufall, 10);
X2(x_zufall+40, y_zufall, 10);

function A(x1, y1, i) {
    my_context.moveTo(x1, y1 + i);
    my_context.lineTo(x1 + i / 2, y1);
    my_context.lineTo(x1 + i, y1 + i);
    my_context.moveTo(x1 + i / 4, y1 + i / 2);
    my_context.lineTo(x1 + 3 * i / 4, y1 + i / 2);
    my_context.stroke();
}

function M1(x1, y1, i) {
    my_context.moveTo(x1, y1 + i);
    my_context.lineTo(x1 + i / 2, y1);
    my_context.lineTo(x1 + i, y1 + i);
    my_context.moveTo(x1 + i / 4, y1 + i / 2);
    
    my_context.stroke();
}
function M2(x1, y1, i) {
    my_context.moveTo(x1, y1 + i);
    my_context.lineTo(x1 + i / 2, y1);
    my_context.lineTo(x1 + i, y1 + i);
    my_context.moveTo(x1 + i / 4, y1 + i / 2);
    
   ...