Холст HTML5
<Canvas> тег пользовательские графики, такие как диаграммы и другие изображения, вы должны использовать сценарий для создания графики.
В холсте (Canvas) нарисовать красный прямоугольник, градиент прямоугольник, цветные прямоугольники, а некоторые цветного текста.
Что такое холст?
HTML5 <холст> элемент используется для создания графики при помощи скриптов (обычно JavaScript), чтобы закончить.
Тег <Canvas> представляет собой графический контейнер, вы должны использовать сценарий для создания графики.
Вы можете использовать Canva рисовать пути, коробки, круги, персонажей и добавление изображений с помощью различных методов.
Поддержка браузеров
Internet Explorer 9 +, Firefox, Opera, Chrome, Safari и поддержка <холст> элемент.
Примечание: Internet Explorer 8 и более ранних версиях IE браузер не поддерживает <Canvas> элемент.
Создание холста (Canvas)
Страница холст представляет собой прямоугольник с помощью элемента <Canvas>.
Примечание: По умолчанию, элемент <холст> не имеет границы и содержание.
<Canvas> Простые примеры заключаются в следующем:
Примечание: тег как правило , необходимо указать идентификатор атрибута (сценарий часто цитируется), размер, ширина и высота атрибуты определяют холст.
Совет: Вы можете использовать несколько <Canvas> элемент в HTML - страницы.
Использование атрибута стиля, чтобы добавить рамку:
примеров
style="border:1px solid #000000;">
</canvas>
Попробуйте »
рисовать графику Использование JavaScript
Сам холст элемент не получает питание. Все работы должны быть сделаны в JavaScript сделано внутри страны:
примеров
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Попробуйте »
Примеры анализа:
Во-первых, найти элемент <Canvas>:
Затем мы создаем объект контекста:
getContext ( "2d") объект представляет собой встроенный в объект HTML5 имеет несколько методов для рисования путей, коробки, круги, символов и добавление изображений.
Следующие две строки кода, чтобы нарисовать красный прямоугольник:
ctx.fillRect(0,0,150,75);
Установка FillStyle свойство может быть CSS цвет, градиент или узор. FillStyle настройка по умолчанию # 000000 (черный).
FillRect (х, у, ширина,высота) метод определяет прямоугольник , заполненный текущим методом.
координаты Canvas
Полотно представляет собой двумерную сетку.
холст верхней координаты левого угла (0,0)
Описанный выше метод имеет параметры FillRect (0,0,150,75).
Это означает: рисовать 150x75 прямоугольник на холсте от левого верхнего угла (0,0).
Примеры координат
Как показано ниже, Х и Y координаты холста на холст для живописи позиционирования. Движение прямоугольника мыши, местоположение отображения координат.
Холст - Путь
На холст картины линии, мы будем использовать следующие два метода:
- MoveTo(х, у) координаты определяют строку , начинающуюся
- LineTo(х, у) координаты , чтобы определить конец строки
Нарисуйте линию мы должны использовать «чернила» методы, такие как инсульт ().
примеров
Определить начальные координаты (0,0), и конечные координаты (200, 100), а затем использовать метод инсульта (), чтобы нарисовать линию:
JavaScript:
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
Попробуйте »
Нарисуйте круг на холсте, мы будем использовать следующий метод:
- дуга (х, у, г, старт, стоп)
На самом деле, мы использовали «чернила» подход при рисовании круга, такие как инсульт () или заполнить ().
примеров
Использование дуги () метод рисования окружности:
JavaScript:
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
Попробуйте »
Холст - Текст
Используйте холст для рисования текста, важные свойства и методы следующим образом:
- Шрифт - определить шрифт
- fillText (текст, х, у)- Рисует твердый текст на холсте
- strokeText (текст, х, у)- рисунок на холсте полый текст
Используйте fillText ():
примеров
Используйте "Arial" шрифт рендеринга текста высокой 30px (сплошная линия) на холсте:
JavaScript:
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
Попробуйте »
Используйте strokeText ():
примеров
Используйте "Arial" шрифт рендеринга текста высокого 30px (пустотелый) на холсте:
JavaScript:
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
Попробуйте »
Холст - Градиент
Градиент можно заполнить прямоугольники, круги, линии, текст и т.д., различные формы могут определять различные цвета.
Вот два различных способа установки Canvas Gradient:
- createLinearGradient (х, у, x1,y1) - Создайте градиент линии
- createRadialGradient (х, у, г,x1, y1, r1) - создать радиальный / круглый -градуированная
Когда мы используем объект градиента, вы должны использовать два или более стоп цвет.
addColorStop () метод, чтобы определить цвет остановки, использование координат для описания параметров, которые могут быть 0-1.
С помощью параметра FillStyle или StrokeStyle градиент значение градиента, а затем рисовать фигуры, такие как прямоугольники, текст или линии.
Используйте createLinearGradient ():
примеров
Создать линейный градиент. Использование градиентной заливки прямоугольника:
JavaScript:
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);
Попробуйте »
Используйте createRadialGradient ():
примеров
Создание радиального / кругового градиента. Использование градиентной заливки прямоугольника:
JavaScript:
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);
Попробуйте »
Холст - Изображения
Одно изображение на холсте, используя следующие методы:
- DrawImage(образ, х, у)
Используйте изображение:
примеров
Изображение помещается на холсте:
JavaScript:
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
Попробуйте »
HTML Canvas Справочное руководство
Полное свойство этикетке может ссылаться Canvas справочное руководство.
HTML <холст> Тег
| Tag | 描述 |
|---|---|
| <canvas> | HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 |