Canvas (HTML)

Материал из Википедии — свободной энциклопедии

Текущая версия страницы пока не проверялась опытными участниками и может значительно отличаться от версии, проверенной 3 ноября 2011; проверки требует 1 правка.

Перейти к: навигация, поиск

Canvas (англ. canvas — «холст») — элемент HTML 5, который предназначен для создания растрового изображения при помощи JavaScript.

[править] История

Впервые элемент canvas был представлен компанией Apple в движке WebKit для Mac OS X с целью последующего его использования в приложениях Dashboard и Safari.

Поддержка canvas в Gecko появилась в версии 1.8 (версия 1.5 браузера Firefox), в Presto с версии 9.0 веб-браузера Opera. В Internet Explorer 9 поддержка canvas реализована только начиная с версии Platform Preview 3. Ранее ситуацию с отсутствием canvas в IE исправила компания Google, выпустившая собственное расширение, написанное на JavaScript, под названием ExplorerCanvas.

[править] Ситуация сегодня

На сегодняшний день canvas чаще используется для построения графиков, простой анимации и игр в веб-браузерах. Группа WHATWG предлагает использовать canvas как стандарт для создания графики в новых поколениях веб-приложений.^[1]

Организация Mozilla Foundation ведёт проект под названием Canvas 3D^[2], целью которого является добавить низкоуровневую поддержку графических ускорителей для отображения трёхмерных изображений через HTML элемент canvas.

[править] Примеры

Код, идущий далее, создаёт на странице canvas элемент:

Код

<html>
  <head>
    <title>Пример использования</title>
  </head>
  <body>
    <canvas id='example'>
      Этот текст отобразится если браузер не поддерживает html5 элемент canvas.
    </canvas>
  </body>
</html>

Использование JavaScript для того, чтобы нарисовать окружность:

Код

<html>
  <head>
    <title>circle</title>
  </head>
  <body>
    <canvas id='example'>Обновите браузер</canvas>
    <script type="text/javascript">
      var canvas = document.getElementById("example");
      var context = canvas.getContext("2d");
      function drawCircle(x, y, r) {
      context.arc(x, y, r, 0, 2 * Math.PI, false);
      }
      context.beginPath();
      drawCircle(150, 75, 50);
      context.lineWidth = 15;
      context.strokeStyle = "#0f0";
      context.stroke();
    </script>
  </body>
</html>

Отрисуем на canvas обдуваемое дерево Пифагора:

Код

<html> 
  <head>
      <title>Дерево Пифагора</title>
      <script type="text/javascript">
        // функция рисует под углом angle линию из указанной точки длиной ln
        function drawLine(x, y, ln, angle) {
          context.moveTo(x, y);
          context.lineTo(Math.round(x + ln * Math.cos(angle)), Math.round(y - ln * Math.sin(angle)));
        }
        // Функция рисует дерево
        function drawTree(x, y, ln, minLn, angle) {
          if (ln > minLn) {
              ln = ln * 0.75;
              drawLine(x, y, ln, angle);
              x = Math.round(x + ln * Math.cos(angle));
              y = Math.round(y - ln * Math.sin(angle));
              drawTree(x, y, ln, minLn, angle + Math.PI/4);
              drawTree(x, y, ln, minLn, angle - Math.PI/6);
              // если поставить угол Math.PI/4 , то выйдет классическое дерево
          }
        }
        // Инициализация переменных
        function init() {
          var canvas = document.getElementById("tree");
          context = canvas.getContext("2d");
          canvas.width = 480; // Ширина холста
          canvas.height = 320; // высота холста
          var x = canvas.width / 2;
          var y = canvas.height;
          var ln = 120; // начальная длина линии
          var minLn = 4; // минимальная длина до которой рисуются линии
          context.fillStyle = "#ddf"; // цвет фона
          context.strokeStyle = "#020"; //цвет линий
          context.fillRect(0, 0, canvas.width, canvas.height);
          context.lineWidth = 2; // ширина линий
          context.beginPath();
          drawTree(x, y, ln, minLn, Math.PI / 2);
          context.stroke();
        }
      </script>
  </head>
  <body onload="init();">
    <canvas id="tree"></canvas>
  </body> 
</html>

Сохранение изображения в теле документа и его отображение:

Код

    // Изображение сохранено в массиве colorArray в формате RGBA
    //(в данном примере - иконка VirtualBox)
    var colorArray = [255, 255, 255, 255, 255, 255, 255, 255, 242, 239, 239, 255, 242, 239, 240, 255, 242, 238, 239, 255, 242, 238, 239,
                      255, 242, 238, 239, 255, 242, 238, 239, 255, 242, 238, 239, 255, 242, 238, 239, 255, 242, 238, 239, 255, 241, 238,
                      239, 255, 246, 244, 244, 255, 255, 255, 255, 255, 255, 255, 255, 255, 242, 239, 240, 255, 85, 124, 158, 255, 110,
                      158, 188, 255, 109, 155, 185, 255, 109, 155, 186, 255, 109, 155, 186, 255, 109, 155, 186, 255, 109, 154, 185, 255,
                      109, 154, 185, 255, 109, 155, 186, 255, 109, 156, 186, 255, 112, 157, 188, 255, 94, 138, 174, 255, 159, 166, 180,
                      255, 253, 253, 253, 255, 175, 177, 189, 255, 142, 213, 242, 255, 95, 193, 230, 255, 88, 187, 226, 255, 87, 188, 225,
                      255, 86, 187, 222, 255, 84, 186, 221, 255, 84, 186, 219, 255, 84, 186, 218, 255, 83, 186, 217, 255, 83, 185, 216,
                      255, 78, 182, 213, 255, 137, 224, 253, 255, 94, 124, 155, 255, 238, 237, 239, 255, 173, 175, 186, 255, 121, 201, 234,
                      255, 130, 189, 214, 255, 254, 252, 253, 255, 231, 240, 245, 255, 233, 241, 245, 255, 229, 239, 244, 255, 231, 240,
                      244, 255, 226, 237, 243, 255, 233, 241, 245, 255, 234, 242, 246, 255, 216, 229, 237, 255, 76, 176, 217, 255, 97, 126,
                      155, 255, 224, 225, 229, 255, 173, 175, 186, 255, 114, 195, 232, 255, 156, 199, 217, 255, 158, 198, 218, 255, 75, 151,
                      187, 255, 79, 153, 187, 255, 100, 165, 196, 255, 80, 153, 187, 255, 117, 175, 201, 255, 66, 146, 182, 255, 67, 147,
                      184, 255, 239, 243, 246, 255, 74, 170, 212, 255, 96, 125, 155, 255, 223, 225, 228, 255, 175, 176, 186, 255, 108, 192,
                      230, 255, 162, 198, 216, 255, 160, 195, 214, 255, 83, 147, 182, 255, 86, 150, 184, 255, 184, 211, 225, 255, 116, 170,
                      198, 255, 236, 243, 246, 255, 80, 151, 185, 255, 73, 148, 183, 255, 238, 243, 246, 255, 73, 167, 210, 255, 96, 124,
                      155, 255, 224, 225, 228, 255, 175, 176, 187, 255, 102, 188, 227, 255, 161, 193, 212, 255, 216, 229, 237, 255, 154,
                      188, 210, 255, 73, 136, 175, 255, 230, 238, 244, 255, 189, 213, 226, 255, 252, 253, 254, 255, 141, 185, 207, 255,
                      70, 144, 180, 255, 238, 244, 245, 255, 73, 164, 208, 255, 96, 124, 155, 255, 224, 225, 228, 255, 176, 177, 187, 255,
                      97, 183, 225, 255, 165, 193, 211, 255, 200, 217, 228, 255, 240, 244, 248, 255, 96, 148, 181, 255, 199, 218, 229, 255,
                      226, 236, 241, 255, 134, 177, 202, 255, 222, 234, 241, 255, 47, 125, 166, 255, 240, 245, 246, 255, 71, 162, 207, 255,
                      96, 123, 155, 255, 224, 225, 228, 255, 177, 177, 187, 255, 91, 178, 221, 255, 170, 195, 212, 255, 158, 188, 208, 255,
                      155, 185, 206, 255, 221, 232, 239, 255, 137, 174, 199, 255, 165, 194, 212, 255, 73, 135, 172, 255, 228, 237, 243, 255,
                      182, 210, 223, 255, 228, 236, 239, 255, 70, 158, 202, 255, 95, 123, 154, 255, 224, 225, 229, 255, 178, 178, 188, 255,
                      85, 175, 219, 255, 166, 193, 210, 255, 166, 194, 211, 255, 85, 137, 171, 255, 255, 255, 255, 255, 83, 137, 170, 255,
                      92, 143, 175, 255, 85, 140, 173, 255, 104, 154, 183, 255, 132, 173, 196, 255, 234, 238, 241, 255, 69, 153, 198, 255,
                      95, 123, 154, 255, 224, 226, 229, 255, 179, 178, 189, 255, 80, 171, 217, 255, 163, 192, 209, 255, 156, 188, 207, 255,
                      61, 121, 158, 255, 185, 207, 220, 255, 65, 123, 160, 255, 81, 135, 167, 255, 79, 134, 167, 255, 73, 131, 165, 255, 63,
                      124, 160, 255, 240, 242, 244, 255, 68, 151, 194, 255, 95, 122, 153, 255, 224, 226, 229, 255, 179, 178, 189, 255, 75,
                      167, 214, 255, 155, 188, 206, 255, 209, 224, 232, 255, 151, 184, 203, 255, 154, 186, 204, 255, 155, 185, 203, 255,
                      156, 187, 204, 255, 155, 185, 203, 255, 155, 185, 203, 255, 152, 184, 203, 255, 239, 242, 243, 255, 67, 147, 191,
                      255, 94, 122, 153, 255, 224, 226, 229, 255, 178, 177, 188, 255, 77, 168, 218, 255, 99, 155, 185, 255, 161, 194, 211,
                      255, 160, 193, 210, 255, 159, 191, 208, 255, 160, 191, 207, 255, 161, 189, 206, 255, 161, 189, 206, 255, 162, 189,
                      206, 255, 164, 191, 207, 255, 133, 166, 187, 255, 76, 159, 200, 255, 92, 121, 153, 255, 223, 225, 229, 255, 194,
                      194, 201, 255, 78, 140, 191, 255, 79, 164, 213, 255, 74, 158, 206, 255, 74, 157, 206, 255, 74, 157, 205, 255, 74,
                      157, 205, 255, 75, 156, 203, 255, 75, 156, 203, 255, 75, 156, 202, 255, 76, 156, 202, 255, 78, 158, 203, 255, 84,
                      167, 216, 255, 96, 114, 140, 255, 228, 230, 234, 255, 250, 251, 251, 255, 148, 154, 166, 255, 114, 123, 144, 255,
                      112, 121, 142, 255, 112, 121, 143, 255, 112, 121, 143, 255, 112, 122, 143, 255, 112, 122, 144, 255, 112, 122, 144,
                      255, 112, 122, 144, 255, 112, 122, 145, 255, 111, 122, 145, 255, 112, 121, 142, 255, 173, 179, 191, 255, 239, 240,
                      243, 255, 254, 254, 254, 255, 246, 247, 248, 255, 231, 234, 236, 255, 227, 229, 234, 255, 227, 229, 234, 255, 227,
                      230, 234, 255, 227, 229, 234, 255, 227, 229, 234, 255, 227, 229, 234, 255, 227, 229, 234, 255, 227, 229, 234, 255,
                      227, 230, 233, 255, 230, 232, 236, 255, 240, 242, 244, 255, 254, 254, 254, 255];
 
    var canvas = document.createElement('canvas');
    canvas.width="15";
    canvas.height="16";
    document.body.appendChild(canvas);
    var ctx = canvas.getContext('2d');
    var canvasData = ctx.getImageData(0, 0, canvas.width, canvas.height);
 
    for(var i = 0; i < canvasData.width; i++){
        for(var j = 0; j < canvasData.height; j++){
            var idx = (i + j * canvas.width) * 4;
            canvasData.data[idx + 0] = colorArray[idx + 0]; // RED - красный
            canvasData.data[idx + 1] = colorArray[idx + 1]; // GREEN - зелёный
            canvasData.data[idx + 2] = colorArray[idx + 2]; // BLUE - синий
            canvasData.data[idx + 3] = colorArray[idx + 3]; // ALPHA - альфа-канал
        }
    }
 
    ctx.putImageData(canvasData, 0, 0);

[править] Примечания

[править] См. также

WebGL — разрабатываемый стандарт отображения 3D графики в web браузерах
SVG
Сравнение браузеров
HTML5
CSS3

[править] Ссылки

Примеры использования

[0] Спецификация от WHATWG

[1] Mozilla Canvas 3D

[1]

[2]

Canvas (HTML)

Содержание

[править] История

[править] Ситуация сегодня

[править] Примеры

[править] Примечания

[править] См. также

[править] Ссылки

Личные инструменты

Пространства имён

Варианты

Просмотры

Действия

Поиск

Навигация

Участие

Печать/экспорт

Инструменты

На других языках