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-документами.
[править] Примечания
[править] См. также
[править] Ссылки
- Спецификация от WHATWG
- Обучение основам canvas на сайте Mozilla Developer center
- Mozilla Canvas 3D
- Canvas reference page in Apple Developers Connection
- Wii Opera SDK Canvas Library for Internet Gaming
- ExplorerCanvas
- Примеры использования

