HTML <canvas> элемент используется для создания графики на веб - странице.
Графический слева создается с <canvas> . Это показывает четыре элемента: красный прямоугольник, градиент прямоугольник, многоцветный прямоугольник, и текст многоцветного.
Что такое HTML Canvas ?
HTML <canvas> элемент используется для создания графики на лету, с помощью сценариев (usually JavaScript) .
<canvas> элемент является только контейнером для графики. Вы должны использовать сценарий на самом деле рисовать графики.
Canvas имеет несколько методов для рисования путей, коробки, круги, текст, и добавление изображений.
Элемент холста является частью HTML5 и позволяет динамическому, скриптового рендеринг 2D форм и растровых изображений. Это низкий уровень, процедурное модель, которая обновляет битовую карту и не имеет встроенный в граф сцены.
Поддержка браузеров
Числа в таблице указать первую версию браузера , которая полностью поддерживает <canvas> элемент.
| Элемент | |||||
|---|---|---|---|---|---|
| <canvas> | 4,0 | 9,0 | 2,0 | 3,1 | 9,0 |
история
Холст был первоначально введен Apple, для использования внутри своего собственного компонента X WebKit Mac OS в 2004 году приложений Powering как Dashboard виджеты и браузер Safari.
Позже, в 2005 году она была принята в версии 1.8 Gecko-браузеров и Opera в 2006 году, и стандартизованный Hypertext Application Technology рабочей группы Web (WHATWG) на новых предлагаемых спецификаций для веб-технологий следующего поколения.
Применение
Холст состоит из растяжимой области, определенной в HTML-коде с высоты и ширины атрибутов. JavaScript код может получить доступ к области через полный набор функций рисования, аналогичные другой общего 2D API,, что позволяет динамически генерируемые графики.
Некоторые предполагаемые виды использования холста включают создание графику, анимацию, игры и композицию изображения.
Canvas Примеры
canvas представляет собой прямоугольную область на HTML - странице. По умолчанию, canvas не имеет границ и содержания.
Разметка выглядит следующим образом:
<canvas id="myCanvas" width="200" height="100"></canvas>
Note: Всегда указать идентификатор атрибута (to be referred to in a script) , а ширина и высота атрибутов , чтобы определить размер canvas .
Для того, чтобы добавить границу, используйте style атрибута:
Основной Canvas Пример
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas> Попробуй сам " Рисование с помощью JavaScript
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75); Попробуй сам " Нарисуйте линию
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke(); Попробуй сам " Нарисовать круг
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke(); Попробуй сам " Нарисовать текст
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50); Попробуй сам " Stroke Text
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50); Попробуй сам " Draw линейного градиента
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80); Попробуй сам " Draw Circular Градиент
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80); Попробуй сам " Нарисуйте изображение
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10); Попробуй сам " HTML Canvas Учебник
Для того, чтобы узнать все о HTML <canvas> , Посетите наш полный HTML Canvas Учебник .