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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
---
title: Canvas
slug: Web/API/Canvas_API
tags:
- API
- Canvas
- Обзор
- Справка
translation_of: Web/API/Canvas_API
---
<div>{{CanvasSidebar}}</div>
<p class="summary">Элемент {{HTMLElement("canvas")}}, добавленный в <a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5">HTML5</a>, предназначен для создания графики с помощью <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>. Например, его используют для рисования графиков, создания фотокомпозиций, анимаций и даже обработки и рендеринга видео в реальном времени.</p>
<p><em>«</em>Canvas<em>»</em> в переводе с английского означает <em>«</em>холст<em>»</em>.</p>
<p>Приложения от Mozilla поддерживают <code><canvas></code> начиная с Gecko 1.8 (т.е. <a href="/en-US/docs/Firefox_1.5_for_developers" title="Firefox_1.5_for_developers">с Firefox 1.5</a>). Этот элемент первоначально был представлен Apple для OS X <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Dashboard</a> и Safari. Internet Explorer поддерживает<code> <canvas></code> начиная с 9 версии; для более ранних версий IE поддержку для <canvas> можно добавить с помощью скрипта из проекта Google's <a class="external" href="http://excanvas.sourceforge.net/">Explorer Canvas</a>. Google Chrome и Opera 9 также поддерживают <code><canvas></code>.</p>
<p>Элемент <code><canvas></code> также используется технологией <a href="/en-US/docs/WebGL" title="WebGL">WebGL</a> для отрисовки аппаратно-ускоренной 3D-графики на веб-страницах.</p>
<h2 id="Пример">Пример</h2>
<p>Это простой пример использования {{domxref("CanvasRenderingContext2D.fillRect()")}} метода.</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><canvas id="canvas"></canvas>
</pre>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js">var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);
</pre>
<p>Отредактируйте код ниже, чтобы увидеть результат на холсте.</p>
<div class="hidden">
<h6 id="Playable_code">Playable code</h6>
<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
<input id="edit" type="button" value="Edit" />
<input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);</textarea></pre>
<pre class="brush: js">var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}
reset.addEventListener("click", function() {
textarea.value = code;
drawCanvas();
});
edit.addEventListener("click", function() {
textarea.focus();
})
textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
</pre>
</div>
<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
<h2 id="Справочные_материалы">Справочные материалы</h2>
<div class="index">
<ul>
<li>{{domxref("HTMLCanvasElement")}}</li>
<li>{{domxref("CanvasRenderingContext2D")}}</li>
<li>{{domxref("CanvasGradient")}}</li>
<li>{{domxref("CanvasPattern")}}</li>
<li>{{domxref("ImageBitmap")}}</li>
<li>{{domxref("ImageData")}}</li>
<li>{{domxref("TextMetrics")}}</li>
<li>{{domxref("Path2D")}} {{experimental_inline}}</li>
</ul>
</div>
<p class="brush: js"><span id="result_box" lang="ru"><span>Интерфейсы, связанные с <code>WebGLRenderingContext</code>, ссылаются на </span></span><a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p>
<h2 class="Documentation" id="Documentation">Руководства</h2>
<dl>
<dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></dt>
<dd>Подробный <span id="result_box" lang="ru"><span>учебник, охватывающий как основное использование <code><canvas></code>, так и его расширенные функции.</span></span></dd>
<dt><a href="/en-US/Add-ons/Code_snippets/Canvas">Фрагменты кода: Canvas</a></dt>
<dd><span id="result_box" lang="ru"><span>Некоторые фрагменты кода, ориентированные на разработчиков, с использованием <code><canvas></code>.</span></span></dd>
<dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Demo: A basic ray-caster</a></dt>
<dd>Демо анимации трассировки-лучей используя canvas.</dd>
<dt><a href="/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas">Drawing DOM objects into a canvas</a></dt>
<dd>Как рисовать DOM контент, таких как HTML-элементы, в canvas.</dd>
<dt><a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulating video using canvas</a></dt>
<dd>Объединяет {{HTMLElement("video")}} и {{HTMLElement("canvas")}} для манипулирования видео данных в реальном времени.</dd>
</dl>
<h2 class="Resources" id="Resources">Ресурсы</h2>
<h3 id="Основное">Основное</h3>
<ul>
<li><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML5 Canvas Deep Dive</a></li>
<li><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Справочник по Canvas</a></li>
</ul>
<h3 class="Libraries" id="Libraries">Библиотеки</h3>
<ul>
<li><a href="http://fabricjs.com">Fabric.js</a> это canvas библиотека с открытым исходным кодом с возможностями SVG парсинга.</li>
<li><a href="https://github.com/ericdrowell/KineticJS">Kinetic.js</a> это canvas библиотека с открытым исходным кодом ориентированная на интерактивность для настольных и мобильных приложений.</li>
<li><a href="http://paperjs.org/">Paper.js</a> это программируемый фреймворк векторной графики с открытым исходным кодом который запускается на HTML5 Canvas.</li>
<li><a href="http://libcanvas.github.com/">libCanvas</a> это мощный и лёгкий canvas фреймворк.</li>
<li><a href="http://processingjs.org">Processing.js</a> является портом языка обработки визуализации.</li>
<li><a href="https://playcanvas.com/">PlayCanvas</a> игровой движок с открытым исходным кодом.</li>
<li><a href="http://www.pixijs.com/">Pixi.js</a> игровой движок с открытым исходным кодом.</li>
<li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> библиотека создание графиков и графики.</li>
<li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> API анимации для canvas.</li>
<li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> WebGL фреймворк для визуализации данных, для креативного написания кода и разработки игр.</li>
<li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> создаёт интерактивные 2D Canvas визуализации данных для интернета.</li>
</ul>
<h2 id="Specifications">Спецификации</h2>
{{Specifications("html.elements.canvas")}}
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li><a href="/en-US/docs/Web/WebGL">WebGL</a></li>
</ul>
|
