Перейти к содержанию

<canvas>

Тег <canvas> (от англ. canvas - холст) создаёт область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства.

При помощи элемента <canvas> можно создавать рисунки, анимацию, игры и др.

Скрипты

Синтаксис

1
<canvas id="<идентификатор>"></canvas>

Закрывающий тег обязателен.

Атрибуты

height

Задаёт высоту холста. По умолчанию 150 пикселей.

width

Задаёт ширину холста. По умолчанию 300 пикселей.

Также для этого элемента доступны универсальные атрибуты.

Спецификации

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!doctype html>
<html>
    <head>
        <title>canvas</title>
        <meta charset="utf-8" />
        <script>
            window.onload = function () {
                var drawingCanvas =
                    document.getElementById('smile');
                if (
                    drawingCanvas &&
                    drawingCanvas.getContext
                ) {
                    var context =
                        drawingCanvas.getContext('2d');
                    // Рисуем окружность
                    context.strokeStyle = '#000';
                    context.fillStyle = '#fc0';
                    context.beginPath();
                    context.arc(
                        100,
                        100,
                        50,
                        0,
                        Math.PI * 2,
                        true,
                    );
                    context.closePath();
                    context.stroke();
                    context.fill();
                    // Рисуем левый глаз
                    context.fillStyle = '#fff';
                    context.beginPath();
                    context.arc(
                        84,
                        90,
                        8,
                        0,
                        Math.PI * 2,
                        true,
                    );
                    context.closePath();
                    context.stroke();
                    context.fill();
                    // Рисуем правый глаз
                    context.beginPath();
                    context.arc(
                        116,
                        90,
                        8,
                        0,
                        Math.PI * 2,
                        true,
                    );
                    context.closePath();
                    context.stroke();
                    context.fill();
                    // Рисуем рот
                    context.beginPath();
                    context.moveTo(70, 115);
                    context.quadraticCurveTo(
                        100,
                        130,
                        130,
                        115,
                    );
                    context.quadraticCurveTo(
                        100,
                        150,
                        70,
                        115,
                    );
                    context.closePath();
                    context.stroke();
                    context.fill();
                }
            };
        </script>
    </head>
    <body>
        <canvas id="smile" width="200" height="200">
            <p>Ваш браузер не поддерживает рисование.</p>
        </canvas>
    </body>
</html>

См. также

Ссылки

Комментарии