Canvas mit Bezier Curve

Lediglich 32 Codezeilen lang ist der Code zum erzeugen dieser spassigen „leuchten Linien im Dunklen“ – incl. HTML-Canvas. Es wird dafür mithilfe einiger Zufallszahlen alle 50ms eine neue Kurve erzeugt (bezierCurve) die verblasst indem sich über den canvas in jeder Schleife ein schwarzes rectangle (mit alpha 0.1) legt. Der „glow“ um die Kurve wird durch einen Schatten mit weißer Farbe erzeugt. Beeindruckt?




Und hier der code zur bezierCurve


<canvas width="650" height="450" style="margin-left:-30px"></canvas>
<script>
 var context = document.getElementsByTagName('canvas')[0].getContext('2d');
 var lastX = context.canvas.width * Math.random();
 var lastY = context.canvas.height * Math.random();
 var hue = 0;
 function line() {
   context.save();
   context.translate(context.canvas.width/2, context.canvas.height/2);
   context.scale(0.9, 0.9);
   context.translate(-context.canvas.width/2, -context.canvas.height/2);
   context.beginPath();
   context.lineWidth = 5 + Math.random() * 10;
   context.moveTo(lastX, lastY);
   lastX = context.canvas.width * Math.random();
   lastY = context.canvas.height * Math.random();
   context.bezierCurveTo(context.canvas.width * Math.random(),
                         context.canvas.height * Math.random(),
                         context.canvas.width * Math.random(),
                         context.canvas.height * Math.random(),
                         lastX, lastY);
   hue = hue + 10 * Math.random();
   context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
   context.shadowColor = 'white';
   context.shadowBlur = 10;
   context.stroke();
   context.restore();
 }
 setInterval(line, 50);
 function blank() {
   context.fillStyle = 'rgba(0,0,0,0.1)';
   context.fillRect(0, 0, context.canvas.width, context.canvas.height);
 }
 setInterval(blank, 40);
</script>

Das ganze stammt vom w3c: Example Canvas bezierCurve

Dieser Beitrag wurde unter HTML5 abgelegt und mit , , , , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

3 Antworten auf Canvas mit Bezier Curve

  1. Philastan sagt:

    Beeindruckt? Ja!

  2. werelion sagt:

    Toller Effekt!
    Ein Programmierbeispiel ‚Lissajous-Kurven‘ mit dieser Farbdarstellung
    fände ich optisch auch sehr ansprechend.

    Vielleicht findet sich ja jemand, der es programmiert und hier einstellt.
    Denn obwohl die Mathematik hinter der eigentlichen Funktion an sich nicht so kompliziert ist,wäre für mich eine Umsetzung in html5 (noch) zu aufwändig.
    Da bin ich (leider noch) Laie.

  3. SoRoom sagt:

    Für die paar Zeilen sieht es echt gut aus 😉

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *