100 eyes

Tutorial teaching basic JavaScript and HTML canvas

HTML

<h1>Malen auf der Leinwand (Canvas)</h1>
<canvas id="myCanvas" width="600px" height="400px" style="border-width: 1px; border-style: solid"></canvas>

JavaScript

// Leinwand holen
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext('2d');

// Mausbewegungen verfolgen und Gesicht an der Position der Maus malen
canvas.onmousemove = function (e) {
    loescheLeinwand();
    zeichneGesicht(e.clientX, e.clientY);
};

// Berechnung des Mittelpunkts der Leinwand
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;

// Radius eines Auges
var radiusEye = 50;
// Radius eine Pupille
var radiusPupil = 5;
// Der Abstand zwischen zwei Augen
var distanceEyes = 50;

// Einmal am Anfang, das Gesicht guckt in die Mitte
zeichneGesicht(centerX, centerY);

function kreis(x, y, radius, gefuellt) {
    context.beginPath();
    context.arc(x, y, radius, 0, 2 * Math.PI, false);
    context.lineWidth = 4;
    if (gefuellt) {
        context.fillStyle = '#000000';
        context.fill();
    } else {
        context.fillStyle = '#FFFFFF';
        context.fill();
    }
    context.closePath();
}

function loescheLeinwand() {
    context.clearRect(0, 0, canvas.width, canvas.height);
}

function zeichneAuge(x, y, blickrichtungX, blickrichtungY) {
    // Auge
    kreis(x, y, radiusEye);
    // Pupille mit Blickrichtung
    var aeusserstePupillenPosition = radiusEye - radiusPupil - 5;
    var pupilX = skalieren(x, aeusserstePupillenPosition, blickrichtungX, canvas.width);
    var pupilY = skalieren(y, aeusserstePupillenPosition, blickrichtungY, canvas.height);
    
    kreis(pupilX+2, pupilY-10, radiusPupil, "gefüllt");
}

// Der Abstand der Pupille zum Mittelpunkt des Auges in Relation zum Radius des Auges ist wie der Abstand der Maus vom
// Mittelpunkt des Ausges zur Gesamtgröße der Leinwand
function skalieren(augenPosition, radius, mausPosition, max) {
    var pupille;
    if (augenPosition > mausPosition) {
        pupille = augenPosition - radius * (augenPosition - mausPosition) / augenPosition;
    } else {
        pupille = augenPosition + radius * (mausPosition - augenPosition) / (max - augenPosition);
 ...