Введение в Javascript HTML5 Canvas API

HTML5 Canvas
Некоторые примеры с Canvas

1. HTML5 Canvas

Перед созданием HTML5, когда веб-разработчики хотели использовать графику (graphic) или анимацию (animation) в website необходимо было внедрить продукт третьей стороны (third party), как Flash, Java Applet,.. Хотя это может решить проблему, но website становится тяжелее и что-то вас не устраивает.

Когда HTML5 был запущен, он представил людям многие новые свойства и теги, включая элемент <canvas>. Элемент <canvas> создает прямоугольную область, и вам нужно использовать Javascript чтобы нарисовать на этой области.

Canvas доступен в виде API и поддерживается современными браузерами. Более того, он совместим с несколькими платформами. Таким образом, вы можете создавать приложения один раз и развертывать их на разных платформах - PC (Персональный Компьютер) или мобильных устройствах.

В результате, вы можете создать такую игру только с Javascript:

Браузеры поддерживающие элемент <canvas>:

2. Некоторые примеры с Canvas

В данной части я представлю вам некоторые примеры, используя HTML5 Canvas, целью является помочь вам представить то, что вы можете сделать с HTML5 Canvas.

По умолчанию, элемент <canvas> создает прямоугольную область без границ и содержания. Вы можете настроить ширину и высоту для <canvas> используя атрибуты (attribute) width, height. Если атрибуты width, height не будут определены, они будут иметь значение по умолчанию это 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>

Например, нарисуйте круг на Canvas:

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();
}

Смотрите полный код примера:

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

Например используйте Javascript и Canvas чтобы создать Часы (Clock) отображающие текущее время. Это показывает, что Canvas API может создавать анимационные эффекты.

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>

Введение в Javascript HTML5 Canvas API

1. HTML5 Canvas

2. Некоторые примеры с Canvas

Pуководства ECMAScript, Javascript

Pуководства ECMAScript, Javascript

Новейшие статьи