Hilfe bei einer Leeraufgabe while schleife
Hallo,
Ich bin absoluter Neuling in Sachen Programmierung. Ich versuche mich jetzt schon mehrere Tage an dieser Aufgabe um ein Raster zu erstellen.
Hab da irgend ein Denkfehler drin. So sieht der Code aus wenn ich am Ziel bin, aber ich soll das mit 2 Variablen und 2 schleifen machen. Ich hab schon viel bei google recherchiert, aber mich bringt das mit den Koordinaten durcheinander.
Ich muss ja irgendwas machen dass sich immer wenn column 1 x durch ist sich die 2. Zahl um 12 erhöht.
Grüße hrwik
function drawing() {
color("red");
var column = 0;
while (column < 10) {
circle(column * 10, 0, 4);
circle(column * 10, 12, 4);
circle(column * 10, 24, 4);
circle(column * 10, 36, 4);
circle(column * 10, 48, 4);
circle(column * 10, 60, 4);
circle(column * 10, 72, 4);
circle(column * 10, 84, 4);
circle(column * 10, 96, 4);
circle(column * 10, 108, 4);
column = column + 1;
}
}Der hier verwendete Code
<html data-lt-installed="true">
<head>
<title>Graphics sandbox</title>
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
body{
padding-top:100px;
}
</style>
<script>
var _canvas, _ctx;
window.onload = function() {
setTimeout(function() {
_canvas = document.getElementById("mycanvas");
_ctx = _canvas.getContext("2d");
clear();
drawing();
}, 20);
};
function color(col) {
_ctx.strokeStyle = _ctx.fillStyle = col;
}
function lineWidth(n) {
_ctx.lineWidth = n;
}
var _pushDepth = 0, _centerX, _centerY;
function clear() {
for (var i = 0; i < _pushDepth; ++i)
_ctx.restore();
var w = document.body.clientWidth - 5, h = document.body.clientHeight - 5;
_canvas.width = w;
_canvas.height = h;
_ctx.clearRect(0, 0, w, h);
_ctx.translate(_centerX = Math.round(w / 2), _centerY = Math.round(h / 2));
_ctx.scale(1, -1);
_pushDepth = 2;
}
function box(x, y, w, h) {
_ctx.fillRect(x, y - h, w, h);
}
function circle(x, y, r) {
_ctx.beginPath();
_ctx.arc(x, y, r, 0, 2 * Math.PI);
_ctx.fill();
}
function line(x1, y1, x2, y2) {
_ctx.beginPath();
_ctx.moveTo(x1, y1);
_ctx.lineTo(x2, y2);
_ctx.stroke();
}
function path(spec) {
_ctx.beginPath();
var parsed = spec.split(/\s+/g);
function arg() {
if (i == parsed.length) throw new Error("Expected number, found end of command.");
var val = Number(parsed[++i]);
if (isNaN(val)) throw new Error("Expected number, found '" + parsed[i] + "'");
return val;
}
try {
for (var i = 0; i < parsed.length; ++i) {
var cmd = parsed[i];
if (cmd == "c") {
_ctx.closePath();
} else if (cmd == "g") {
_ctx.moveTo(arg(), arg());
} else if (cmd == "l") {
_ctx.lineTo(arg(), arg());
} else if (cmd == "q") {
var x = arg(), y = arg();
_ctx.quadraticCurveTo(arg(), arg(), x, y);
} else {
throw new Error("Unrecognized path command: '" + cmd + "'");
}
}
_ctx.stroke();
} catch(e) {
console.log("Bad path: " + e.message);
}
}
function text(x, y, string) {
_ctx.save();
_ctx.scale(1, -1);
_ctx.font = "16px sans-serif";
_ctx.fillText(string, x, -y);
_ctx.restore();
}
function rotate(angle) {
_ctx.save();
++_pushDepth;
_ctx.rotate(angle * Math.PI / 180);
}
function moveTo(x, y) {
_ctx.save();
++_pushDepth;
_ctx.translate(x, y);
}
function scale(factor) {
_ctx.save();
++_pushDepth;
_ctx.scale(factor, factor);
}
function goBack() {
_ctx.restore();
--_pushDepth;
}
function fill(color) {
_ctx.fill();
}
</script>
</head>
<body><canvas id="mycanvas"></canvas>
<script>
function drawing() {
color("red");
for (a = 0; a < 20; a++) {
for (a1 = 0; a1 < 20; a1++) {
circle(a * 10, a1 * 12, 4);
circle(a1 * 0, a1 * 12, 4);
}
}
}
// Folgende Funktionen stehen zur Verfügung:
//
// color(string) - setzt die Farbe
// lineWidth(number) - setzt die Dicke der Linie
// box(x, y, width, height) - zeichnet einen Kasten
// circle(x, y, radius) - zeichnet einen Kreis
// line(x1, y1, x2, y2) - zeichnet eine Linie
// text(x, y, string) - zeichnet einen Text
// clear() - leert den Bildschirm
// path(string) - zeichnet eine komplexe Linie (Pfad)
// Für einen Pfad kann man folgende Anweisungen geben:
// g x y - zum Punkt x,y bewegen, ohne zu zeichnen
// l x y - zeichet eine Linie vom aktuellen Punkt bis zum Punkt x,y
// c - zeichnet eine Linie, die zurückführt zum Anfang des Pfads
// q x y cx cy - zeichnet eine Kurve zu x,y, wobei cx,cy als
// „Kontrollpunkt“ zur Definition der Rundung dient
//
// fill() - fülle den Pfad mit der aktuellen Farbe
//
// Alle Koordinaten (Punkte) werden so interpretiert, dass 0,0
// im Zentrum des Bildschirms liegt. x ist die horizontale Achse, y die vertikale.
// Positive x-Werte bewegen sich nach rechts, positive y-Werte bewegen sich nach
// oben.
// Folgende Operationen können dieses Koordinatensystem verändern:
//
// moveTo(x, y) - bewegt den Ursprung nach x,y
// rotate(degrees) - rotiert (dreht) alle nachfolgenden Zeichenoperationen
// um die angegebene Gradzahl
// scale(factor) - skaliert die nachfolgenden Zeichenoperationen
// (größer/kleiner)
// goBack() - macht eine Transformation rückgängig
</script>
</body>
</html>