Внимание! Сайт не обновлялся более 3х лет!
Перейти в портфолио компании

Введение в HTML5 Canvas

27 марта 2012
Сегодня будем пробовать рисовать градиент на canvas'е в HTML5
Уверен, реализация полотна в HTML5 не имеет существенных отличий от реализаций в Delphi и C++Builder
Но согласитесь, простой градиент - не очень интересно, попробуем его разнообразить..
 
Когда я впервые услышал о html5 - первая из мыслей, что посетила меня, звучала примерно так:
 
"наверняка очередной стандарт языка разметки будет существенно сложнее своих предыдущих версий, структура страницы станет значительно сложнее и контроль соблюдения всех норм станет гораздо строже"
 
Но, как оказалось, главная цель html5 - облегчить работу разработчикам и заменить привычный "программистам-мазохистам" flash , тем самым избавив нас от извращений с интеграцией audio/video плееров и т.д.
 
Убедиться в этом можно посмотрев на структуру html5 страницы:

<html>
<head>
    <title>Пробуем рисовать на Canvas в html5</title>
</head>
<body>
 
</body>
</html>

Первое, что бросается в глаза - объявление типа документа:
И это не сокращенная запись, а полноценное объявление типа документа html5!
теперь не нужно тратить время, чтоб определиться каким будет тип документа.
а их не мало:
  • HTML 4.01
  • HTML 4.01 Transitional
  • XHTML 1.0
  • XHTML 1.0 Transitional
  • XHTML 1.1
  • DHTML
 
Для уверенности тип документа html5 можно задать следующим образом:

<!DOCTYPE html>

Почему? Очевидно этого требует "всеми любимый" IE6
 
Самое прекрасное заключается в том, что html5 объединяет прелести всех типов web-документов.
 
Перейдем к Canvas:
 
Объявить его можно следующим способом:

<canvas id="canvas" width="1024" height="480"></canvas>

 
Я выбрал разрешение 1024x480, т.к. это очень удобно на 15-дюймовом мониторе.
 
Определим стиль BODY, пусть фон будет темно-серым, а цвет текста светло-красным.
И сразу "прикрутим" функцию рисования к событию onload, пусть она называется loader():
 

<body onload="loader()" style="color:#a55; background-color:#333">

 
 
Все что нам потребуется - двойной цикл с выводом 3-х квадратов и заменой цвета во внутреннем квадрате на каждой итерации:
И следующие методы:
 
fillStyle - тип/цвет заливки
fillRect(X, Y, WIDTH, HEIGHT)- заливка указанной прямоугольной области
Math.round - Округление чисел с плавающей запятой до целого числа
 

Градиент будет двойным: слева-направо и сверху вниз.

Объявляем необходимые переменные:

// Получаем объект canvas
var canvas = document.getElementById('canvas');
// Получаем холст в 2D контексте
var cnv = canvas.getContext('2d');
// Определяем отступ от краев
var pad = 40;
// Координаты для расчета позиции очередной фигуры
var X=0,Y=0;
// Шаг цикла
var step=35;
// Ширина внешнего и внутреннего квадрата
var w1=30,w2=20;

Выводим черные квадраты:

for (var j=pad; j<canvas.height - pad; j+=step) {
    for (var i=pad; i<canvas.width - pad; i+=step) {
        cnv.fillStyle = "#000";
        cnv.fillRect(i, j, w1, w1);
    }
    X=0;++Y;
}

Результат: (картинки кликабельны)

 
Внутри черных рисуем синие:

cnv.fillStyle = "#006";
cnv.fillRect(i+5, j+5, w2, w2);

И сам градиент:

var k = Math.round(++X*(255/(canvas.width/step)));
var l  = Math.round(Y*(255/(canvas.height/step)));
cnv.fillStyle = "rgba("+k+","+l+","+l+",1)";
cnv.fillRect(i+10, j+10, 10, 10);

 
Вот что получилось в итоге:

 
Исходник:

<!DOCTYPE html>
<html>
    <head>
        <title>xBool Canvas</title>
        <script>
            function loader()
            {   
                // Получаем объект canvas
                var canvas = document.getElementById('canvas');
                // Получаем холст в 2D контексте
                var cnv = canvas.getContext('2d');
                // Определяем отступ от краев
                var pad = 40;
                // Координаты для расчета позиции очередной фигуры
                var X=0,Y=0;
                // Шаг цикла
                var step=35;
                // Ширина внешнего и внутреннего квадрата
                var w1=30,w2=20;
                 
                for (var j=pad; j<canvas.height - pad; j+=step) {
                    for (var i=pad; i<canvas.width - pad; i+=step) {
                        cnv.fillStyle = "#000";
                        cnv.fillRect(i, j, w1, w1);
                        cnv.fillStyle = "#006";
                        cnv.fillRect(i+5, j+5, w2, w2);
                        var k = Math.round(++X*(255/(canvas.width/step)));
                        var l  = Math.round(Y*(255/(canvas.height/step)));
                        cnv.fillStyle = "rgba("+k+","+l+","+l+",1)";
                        cnv.fillRect(i+10, j+10, 10, 10);
                    }
                    X=0;++Y;
                }
            }
        </script>
    </head>
     
    <body onload="loader()" style="color:#a55; background-color:#333">
        <h1>Canvas gradient - arbora.ru</h1>
        <canvas id="canvas" width="1024" height="480"></canvas>
    </body>
</html>

← назад