Элемент HTML5 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

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

Позиция, в которой заканчивается такие команды, например, как 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

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

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

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

• x – координаты центра окружности по оси x
• y – координаты центра окружности по оси y
• radius - радиус окружности
• startAngle – начальная точка дуги; углы определяются в радианах 1π, (примерно 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 - решение

Метод 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();
        });

Закругленный угол с радиусом 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();
        });

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

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);     
})

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

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