Inhaltsverzeichnis

Einführung in Javascript HTML5 Canvas API

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.

<canvas>

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>