Canvas (HTML)

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

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, начиная с Platform Preview 3 поддерживает canvas. Ранее ситуацию с отсутствием canvas в IE исправила компания Google, выпустившая собственное расширение, написанное на JavaScript под названием ExplorerCanvas.

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

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

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

[править] Пример использования

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

<script type="text/javascript">
<![CDATA[
    // Изображение сохранено в массиве 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);
]]>
</script>

Использование Canvas позволяет существенно упростить работу с Web-документами.

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

  1. ↑ Спецификация от WHATWG
  2. ↑ Mozilla Canvas 3D

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

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

Примеры использования
Источник — «http://ru.wikipedia.org/wiki/Canvas_(HTML)»
Личные инструменты
Пространства имён
Варианты
Действия
Навигация
Участие
Печать/экспорт
Инструменты
На других языках