<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>