Canvas Element

Erstellen eines Canvas Elements

        <canvas id="CanvasID" width="PixelX" height="PixelY">
        </canvas>

Kreis

Zeichnen eines Kreises

        var e=document.getElementById("CanvasID");
        var canv=e.getContext("2d");

        canv.fillStyle= "Farbe";
        canv.arc(X,Y,Radius,Startpunkt,Endpunkt);
        canv.fill();  

Rechteck

Zeichnen eines Rechtecks

        var e = document.getElementById("CanvasID");
        var canv = e.getContext("2d");

        canv.fillStyle = "Farbe";
        canv.fillRect(X,Y,Breite,Höhe);

Farbverläufe

Zeichnen von Farbverläufen

        var Farbverlauf=canv.createLinearGradient(X,SteigungX,Y,SteigungY);
        oder
        var Farbverlauf=canv.createRadialGradient(X1,Y1,Radius1,X2,Y2,Radius2);
        Farbverlauf.addColorStop(0, "Farbe1");
        Farbverlauf.addColorStop(0.5, "Farbe2");
        Farbverlauf.addColorStop(1, "Farbe3");
        canv.fillStyle=Farbverlauf;
        canv.fillRect(X,Y,Breite,Höhe);         

Pfade

Zeichnen von Pfaden

        canv.strokeStyle = "Farbe";
        canv.lineWidth = Breite;
        canv.fillStyle = "Farbe";
        canv.moveTo(X1,Y1);
        canv.lineTo(X2,Y2);
        canv.lineTo(X3,Y3);
        canv.lineTo(X4,Y4);
        canv.stroke();
        canv.fill();        

Schrift

Schreiben

        canv.font="Größe Schrift";
        canv.fillStyle = "Farbe";
        canv.fillText("Text",X,Y);
        oder
        canv.strokeStyle = "Farbe";
        canv.strokeText("Text",X,Y);

Demo

Erstellen eines Canvas Elements

        <section>
        <h2>Demo</h2>
        <canvas id="BallCanvas" width="600" height="500">
        </canvas>

Variablen

        <script>
        var canvas = document.getElementById("BallCanvas");
        var context = canvas.getContext('2d');
        var r, radgrad;
        var i = 240;
        var z=0;

Funktion drawCircles

        var drawCircle = function() {

        context.clearRect(0,0,canvas.width,canvas.height);

        if (z<23){var r = i-10;}
        else {var r = i+10;}

        // radiale Gradiente mit Lichtpunkt
        radgrad = context.createRadialGradient(
        300,250,r/3.0,300,250,r );
        radgrad.addColorStop(0.0,'hsl('+z*7+',100%,75%)');
        radgrad.addColorStop(0.9,'hsl('+z*7+',100%,50%)');
        radgrad.addColorStop(1.0,'rgba(0,0,0,0)');

        // Kugel zeichnen
        context.fillStyle = radgrad ;
        context.arc(300,250,r,0,2*Math.PI);
        context.fill();

        i=r;
        z++;
        if (z>=46) {z=0;}
        };

Animation

        drawCircle();  // erstes Set an Kugeln zeichnen

        // Animation mit Puls-Tempo starten/stoppen
        var pulse = 720;
        var running = null;
        canvas.onclick = function() {
        if (running) {
        window.clearInterval(running);
        running = null;
        }
        else {
        running = window.setInterval(
        "drawCircle()",60000/pulse);
        }};