Открыть меню    

Элемент HTML5 canvas. Подробное руководство

canvas Canvas - ("canvas" - холст) - элемент HTML5, предназначенный для создания растрового двухмерного изображения при помощи javascript.

Canvas всегда выводит растровую графику. Если вы хотите вывести векторную графику посредством canvas, то исходное изображение потребуется перерисовать в новом масштабе, использую векторные команды.

Вставляем элемент canvas на страницу

HTML

    <canvas width=400 height=400 id="mycanvas" style="background-color: #666; " >
резервный контент (ваш браузер не поддерживает canvas)
</canvas>

Особенности:

  • Если не указать ширину и высоту, то холст получит значения по умолчанию (300px X 150px). Можно использовать и CSS, например, 60%, но так делать не рекомендуется.
  • Начало координат по умолчанию находится в ЛЕВОМ ВЕХНЕМ УГЛУ. Например, (25;35) означает: 25px от левого края, 35px – верхнего.

Прямоугольник и canvas

С помощью canvas можно нарисовать лишь одну фигуру – прямоугольник, все остальные фигуры рисуются с помощью путей.

HTML

    <canvas width=400 height=400 id="mycanvas" style="background-color: #666; " >
резервный контент (ваш браузер не поддерживает canvas)
</canvas>

jQuery

    $(document).ready(function() {
    var canvas = $("#mycanvas")[0],
        ctx = canvas.getContext("2d");
    ctx.fillStyle = "rgb(255,255,255)";
    // рисуем закрашенный прямоугольник размером 150 на 100 
    // 50 - координата точки начала рисования прям-ка по оси X 
    // 125 - координата точки начала рисования прям-ка по оси Y
    ctx.fillRect(50, 125, 150, 100);
    //ctx.strokeRect(50, 125, 150, 100); // рисуем контурный прямоуг-к
    //ctx.clearRect(50, 125, 150, 100); // удяляем прямоугольник
});

резервный контент (ваш браузер не поддерживает canvas)

Пути в canvas

Путь может создать закрашенную фигуру, контурную. Функции отрисовки путей:

Функция Описание
beginPath() объявляется начало рисования фигуры (пути)
moveTo() текущее положение фигуры (пути)
координаты для начала пути
lineTo() проводится линия от текущей позиции
arc() используется для окружности (дуги)
arcTo() проводится дуга от текущей позиции
closePath() завершаем рисование фигуры (пути)
stroke() создаем контурную фигуру
quadraticCurveTo() проводится квадрат-я фигуры от текущей позиции

Позиция, в которой заканчивается такие команды, например, как lineTo, является начальной позицией для аналогичных команд, заканчивающихся также на To.

jQuery

                $(document).ready(function() {
                // контурный треугольник
                var canvas = $("#mycanvas1")[0],
                    ctx = canvas.getContext("2d");
                    ctx.beginPath();  
                    ctx.moveTo(280,30);  
                    ctx.lineTo(280,280);  
                    ctx.lineTo(30,30);  
                    ctx.closePath();
                    ctx.stroke();
                // закрашенный треугольник
                    ctx.beginPath();  
                    ctx.moveTo(280,290);  
                    ctx.lineTo(30,40);  
                    ctx.lineTo(30,290);  
                    ctx.fillStyle="red";
                    ctx.fill();
            });
    
резервный контент (ваш браузер не поддерживает canvas)

Окружность (дуга) в canvas

Для создания дуг (оркужностей) существует метод arc().

    arc(x,y,radius,startAngle,endAngle,anticlockwide)

Аргументы метода arc():

  • x – координаты центра окружности по оси x
  • y – координаты центра окружности по оси y
  • radius - радиус окружности
  • startAngle – начальная точка дуги; углы определяются в радианах , (примерно 3.14) радиан равен 180 °
  • endAngle – конечная точка дуги
  • anticlockwide – направление дуги, если true, то против часовой стрелки, если false – по часовой

HTML

    
    <canvas width=400 height=300 id="mycanvas2" style="background-color: #555; ">
        резервный контент (ваш браузер не поддерживает canvas)
    </canvas>

jQuery

            $(document).ready(function() {
            var canvas = $("#mycanvas2")[0],
                ctx = canvas.getContext("2d");
                ctx.beginPath();  
                ctx.arc(200,200,100,0,3.14,true);
                ctx.fillStyle="red";
                ctx.fill();
        });
резервный контент (ваш браузер не поддерживает canvas)

закругленный прямоугольник на canvas - решение

Метод arcTo

    arcTo(x1,y1,x2,y2,radius);

Кривая идет из текущей позиции в точку (x1,y1), а вторая из (x1,y1) в точку (x2,y2). Удобно создавать закругленные углы.

jQuery

            $(document).ready(function() {
            var canvas = $("#mycanvas3")[0],
            context = canvas.getContext("2d");
            context.beginPath();
            context.moveTo(100, 225);             // P0
            context.arcTo(300, 25, 500, 225, 100); // P1, P2 and the radius
            context.lineTo(500, 225);             // P2
            context.stroke();
        });
резервный контент (ваш браузер не поддерживает canvas)
Метод arcTo

Закругленный угол с радиусом 20px:

jQuery

            $(document).ready(function() {
            var canvas = $("#mycanvas4")[0],
            context = canvas.getContext("2d");
            context.beginPath();
            context.moveTo(50, 20);  
            context.lineTo(150, 20);  
            context.arcTo(170, 20, 170, 40, 20);
            context.lineTo(170, 100);   
            context.fillStyle="red";
            context.fill();
        });
резервный контент (ваш браузер не поддерживает canvas)

Обводка, цвет, фон

jQuery

    ctx.strokeStyle = ‛#fff‛; // цвет обводки
сtx.stroke(); // по умолчанию черный контур шириной 1px
сtx.lineWidth = 4; // ширина обводки
сtx.fillStyle = "#fff"; // цвет фона
ctx.fill();

Линейные и радиальные градиенты canvas

Линейный градиент в canvas

Последовательность создания градиентов:

  1. Присваиваем градиенту имя и создаем градиент
                var linGrad = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height);
            
  2. Описываем градиент (создаем цветовые переходы)
                linGrad.addColorStop(0, 'yellow'); // 0 - начало градиента
    linGrad.addColorStop(1, 'white');  // 1 - конец градиента
            
  3. Применение градиента
                ctx.fillStyle = linGrad;
            
  4. Создается фигура
                ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
            

jQuery

    $(document).ready(function(){
    var canvas = document.getElementById('mycanvas5');
    // ctx - ссылка на рисовальный контекст
    var ctx = canvas.getContext('2d');    
    // определяем градиент
    var linGrad = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height);
    // добавляем цветовые переходы
    linGrad.addColorStop(0, 'yellow'); // 0 - начало градиента
    linGrad.addColorStop(1, 'white');  // 1 - конец градиента
    // заливаем гдадиентом 
    ctx.fillStyle = linGrad;
    // cjplftv ghzvjeujkmybr
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
})

Радиальный градиент в canvas

Для создания радиального градиента используется команда createLinearGradient. В параметрах указываем положение и радиус кругов.

    createLinearGradient(circle1x, circle1y, circle1Radius, circle1x, circle1y, circle1Radius)

Центры окружностей обычно располагают в одном месте. Пространство внутри меньшего руга заполняется первым цветом, например, addColorStop(0, 'blue'), цвет постепенно угасает, доходя до границы большего круга. Происходит переход в цвет указанный, например, addColorStop(1, 'black'), для второго круга. Вся оставшаяся область (вне второго круга) заполняется конечным цветом, addColorStop(1, 'black).

jQuery

    $(document).ready(function(){
    var canvas = document.getElementById('mycanvas6');
    // ctx - ссылка на рисовальный контекст
    var ctx = canvas.getContext('2d');    
    // определяем градиент
    var radGrad = ctx.createRadialGradient(0,150,150, 0,140,90);
    // добавляем цветовые переходы
    radGrad.addColorStop(0, 'red'); 
    radGrad.addColorStop(0.9, 'yellow');  
    radGrad.addColorStop(1, 'blue');  
    // заполняем прямоугольник шириной 300px радиальным градиентом
    ctx.fillStyle = radGrad;
    ctx.fillRect(0, 0, 300, 300);   

    var canvas = document.getElementById('mycanvas7');
    // ctx - ссылка на рисовальный контекст
    var ctx = canvas.getContext('2d');    
    // определяем градиент
    var radGrad = ctx.createRadialGradient(100,100,50, 100,100,100);
    // добавляем цветовые переходы
    radGrad.addColorStop(0, 'blue');
    radGrad.addColorStop(1, 'black'); 
    // заполняем прямоугольник шириной 200px радиальным градиентом
    ctx.fillStyle = radGrad;
    ctx.fillRect(0, 0, 200, 200);     
})

Статья не окончена

Статья не окончена

Комментарии к статье

аватарка пользователя
2014-06-22
sdf

sdf

аватарка пользователя
2014-08-27
Valery

HDR фильтр на canvas http://siteacademy.ru/index.php/htmldev/38-html/html5-image-effects-html-canvas

аватарка пользователя
2016-10-03
nemezida.su

а можно как-то фигуру сделать ссылкой?)

Добавить комментарий