Einführung in Javascript HTML5 Canvas API

HTML5 Canvas
Einige Beispiele mit Canvas

1. HTML5 Canvas

Bevor HTML5 geboren ist, wenn die Entwickler die Graphik oder Animation in die website benutzen möchten, müssen sie ein Produkt des dritten Party einbetten, z.B Flash, Java Applet,.. Obwohl es das Problem lösen kann, wird die website mehr schwieriger geworden werden und es gibt noch etwas, das Sie unbefriedigen macht.

Wenn HTML5 geboren wird, stellt er viele Funktionen und neuen Tags vor, einschließend die Elemente <canvas>. Das Element <canvas> erstellt einen Rechteck und Sie brauchen Javascript benutzen um auf diesen Raum zu zeichnen.

Canvas ist als API verfügbar und es wird durch die modernen Browser unterstützt. Darüber hinaus ist es mit multiple Plattformen kompatibel. Daher können Sie die Anwendung einmal und in viele verschiedenen Plattformen entwickeln – PC oder die mobilen Geräten.

Deshalb können Sie ein Game wie folgend mit Javascript:

Die Browser untersützen das Element <canvas>:

2. Einige Beispiele mit Canvas

In die Sektion stelle ich Sie einige Beispiele über die Verwendung von HTML5 Canvas vor. Das Hauptzweck besteht darin, Ihnen zu veranschaulichen, was Sie mit HTML5 Canvas tun können.

Nach Default erstellt das Element <canvas> einen Rechteck Raum ohne die Grenze und Inhalt. Sie können die Breite und die Höhe für <canvas> durch die Verwendung der Attributs width, height. Wenn die Attribute width, height nicht festgelegt werden, haben sie die Default Werte von 300px, 150px.

first-canvas-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>Canvas</title>
      <meta charset="UTF-8">
   </head>
   <body>
       <h1>HTML5 Canvas</h1>
       <canvas style="border:1px solid black" width=280 height=150>
            Your browser does not support the HTML5 Canvas.
       </canvas>
   </body>
</html>

Z.B einen Kreis in Canvas zeichen:

function drawCircle() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95, 50, 40, 0, 2 * Math.PI);
    ctx.stroke();
}

Die volle Kode des Beispiel sehen:

draw-circle-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>Canvas</title>
      <meta charset="UTF-8">
      <script>
          function drawCircle()  {
              var c = document.getElementById("myCanvas");
              var ctx = c.getContext("2d");
              ctx.beginPath();
              ctx.arc(95, 50, 40, 0, 2 * Math.PI);
              ctx.stroke();
          }
      </script>
   </head>
   <body>
       <h2>Draw Circle</h2>
       <button onclick="drawCircle()">Draw Circle</button>
       <a href="">Reset</a>
       <br/><br/>
       <canvas id="myCanvas" style="border:1px solid black" width=280 height=150>
            Your browser does not support the HTML5 Canvas.
       </canvas>
   </body>
</html>

HTML 5 Clock

Das Beispiel benutzt Javascript und Canvas um eine Uhr (Clock) zu erstellen, die die momentanen Zeit anzuzeigen. Das zeigt, dass Canvas API die Animation Effekte erstellen kann.

clock.js

function drawClock() {
    var canvas = document.getElementById('myClock');
    if (canvas.getContext) {
        var c2d = canvas.getContext('2d');
        c2d.clearRect(0, 0, 300, 300);
        //Define gradients for 3D / shadow effect
        var grad1 = c2d.createLinearGradient(0, 0, 300, 300);
        grad1.addColorStop(0, "#D83040");
        grad1.addColorStop(1, "#801020");
        var grad2 = c2d.createLinearGradient(0, 0, 300, 300);
        grad2.addColorStop(0, "#801020");
        grad2.addColorStop(1, "#D83040");
        c2d.font = "Bold 20px Arial";
        c2d.textBaseline = "middle";
        c2d.textAlign = "center";
        c2d.lineWidth = 1;
        c2d.save();
        //Outer bezel
        c2d.strokeStyle = grad1;
        c2d.lineWidth = 10;
        c2d.beginPath();
        c2d.arc(150, 150, 138, 0, Math.PI * 2, true);
        c2d.shadowOffsetX = 4;
        c2d.shadowOffsetY = 4;
        c2d.shadowColor = "rgba(0,0,0,0.6)";
        c2d.shadowBlur = 6;
        c2d.stroke();
        //Inner bezel
        c2d.restore();
        c2d.strokeStyle = grad2;
        c2d.lineWidth = 10;
        c2d.beginPath();
        c2d.arc(150, 150, 129, 0, Math.PI * 2, true);
        c2d.stroke();
        c2d.strokeStyle = "#222";
        c2d.save();
        c2d.translate(150, 150);
        //Markings/Numerals
        for (i = 1; i <= 60; i++) {
            ang = Math.PI / 30 * i;
            sang = Math.sin(ang);
            cang = Math.cos(ang);
            //If modulus of divide by 5 is zero then draw an hour marker/numeral
            if (i % 5 == 0) {
                c2d.lineWidth = 8;
                sx = sang * 95;
                sy = cang * -95;
                ex = sang * 120;
                ey = cang * -120;
                nx = sang * 80;
                ny = cang * -80;
                c2d.fillText(i / 5, nx, ny);
                //Else this is a minute marker
            } else {
                c2d.lineWidth = 2;
                sx = sang * 110;
                sy = cang * 110;
                ex = sang * 120;
                ey = cang * 120;
            }
            c2d.beginPath();
            c2d.moveTo(sx, sy);
            c2d.lineTo(ex, ey);
            c2d.stroke();
        }
        //Fetch the current time
        var ampm = "AM";
        var now = new Date();
        var hrs = now.getHours();
        var min = now.getMinutes();
        var sec = now.getSeconds();
        c2d.strokeStyle = "#000";
        //Draw AM/PM indicator
        if (hrs >= 12) ampm = "PM";
        c2d.lineWidth = 1;
        c2d.strokeRect(21, -14, 44, 27);
        c2d.fillText(ampm, 43, 0);

        c2d.lineWidth = 6;
        c2d.save();
        //Draw clock pointers but this time rotate the canvas rather than
        //calculate x/y start/end positions.
        //
        //Draw hour hand
        c2d.rotate(Math.PI / 6 * (hrs + (min / 60) + (sec / 3600)));
        c2d.beginPath();
        c2d.moveTo(0, 10);
        c2d.lineTo(0, -60);
        c2d.stroke();
        c2d.restore();
        c2d.save();
        //Draw minute hand
        c2d.rotate(Math.PI / 30 * (min + (sec / 60)));
        c2d.beginPath();
        c2d.moveTo(0, 20);
        c2d.lineTo(0, -110);
        c2d.stroke();
        c2d.restore();
        c2d.save();
        //Draw second hand
        c2d.rotate(Math.PI / 30 * sec);
        c2d.strokeStyle = "#E33";
        c2d.beginPath();
        c2d.moveTo(0, 20);
        c2d.lineTo(0, -110);
        c2d.stroke();
        c2d.restore();

        //Additional restore to go back to state before translate
        //Alternative would be to simply reverse the original translate
        c2d.restore();
        setTimeout(drawClock, 1000);
    }
}

clock.html

<!DOCTYPE html>
<html>
   <head>
      <title>Clock</title>
      <meta charset="UTF-8">
      <script src="clock.js"></script>
   </head>
   <body onload="drawClock()">
       <h1>HTML 5 Clock</h1>
       <canvas id="myClock" width=320 height=320>
            Your browser does not support the HTML5 Canvas.
       </canvas>
   </body>
</html>

Einführung in Javascript HTML5 Canvas API

1. HTML5 Canvas

2. Einige Beispiele mit Canvas

Anleitungen ECMAScript, Javascript

Anleitungen ECMAScript, Javascript

Neueste Artikel