1. Home
  2. Холст HTML5

Лучшее руководство по Холст HTML5 в 2024 году. В этом руководстве вы можете изучить Что такое холст?,Поддержка браузеров,Создание холста (Canvas),примеров,рисовать графику Использование JavaScript,примеров,координаты Canvas,Холст - Путь,примеров,примеров,Холст - Текст,примеров,примеров,Холст - Градиент,примеров,примеров,Холст - Изображения,Используйте изображение:,примеров,HTML Canvas Справочное руководство,HTML <холст> Тег,

Холст HTML5

<Canvas> тег пользовательские графики, такие как диаграммы и другие изображения, вы должны использовать сценарий для создания графики.

В холсте (Canvas) нарисовать красный прямоугольник, градиент прямоугольник, цветные прямоугольники, а некоторые цветного текста.

Ваш браузер не поддерживает HTML5 <Canvas> элемент.

Что такое холст?

HTML5 <холст> элемент используется для создания графики при помощи скриптов (обычно JavaScript), чтобы закончить.

Тег <Canvas> представляет собой графический контейнер, вы должны использовать сценарий для создания графики.

Вы можете использовать Canva рисовать пути, коробки, круги, персонажей и добавление изображений с помощью различных методов.

Поддержка браузеров

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9 +, Firefox, Opera, Chrome, Safari и поддержка <холст> элемент.

Примечание: Internet Explorer 8 и более ранних версиях IE браузер не поддерживает <Canvas> элемент.

Создание холста (Canvas)

Страница холст представляет собой прямоугольник с помощью элемента <Canvas>.

Примечание: По умолчанию, элемент <холст> не имеет границы и содержание.

<Canvas> Простые примеры заключаются в следующем:

<canvas id="myCanvas" width="200" height="100"></canvas>

Примечание: тег как правило , необходимо указать идентификатор атрибута (сценарий часто цитируется), размер, ширина и высота атрибуты определяют холст.

Совет: Вы можете использовать несколько <Canvas> элемент в HTML - страницы.

Использование атрибута стиля, чтобы добавить рамку:

примеров

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

Попробуйте »

рисовать графику Использование JavaScript

Сам холст элемент не получает питание. Все работы должны быть сделаны в JavaScript сделано внутри страны:

примеров

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

Попробуйте »

Примеры анализа:

Во-первых, найти элемент <Canvas>:

var c=document.getElementById("myCanvas");

Затем мы создаем объект контекста:

var ctx=c.getContext("2d");

getContext ( "2d") объект представляет собой встроенный в объект HTML5 имеет несколько методов для рисования путей, коробки, круги, символов и добавление изображений.

Следующие две строки кода, чтобы нарисовать красный прямоугольник:

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

Установка FillStyle свойство может быть CSS цвет, градиент или узор. FillStyle настройка по умолчанию # 000000 (черный).

FillRect (х, у, ширина,высота) метод определяет прямоугольник , заполненный текущим методом.

координаты Canvas

Полотно представляет собой двумерную сетку.

холст верхней координаты левого угла (0,0)

Описанный выше метод имеет параметры FillRect (0,0,150,75).

Это означает: рисовать 150x75 прямоугольник на холсте от левого верхнего угла (0,0).

Примеры координат

Как показано ниже, Х и Y координаты холста на холст для живописи позиционирования. Движение прямоугольника мыши, местоположение отображения координат.

X
Y

Холст - Путь

На холст картины линии, мы будем использовать следующие два метода:

  • MoveTo(х, у) координаты определяют строку , начинающуюся
  • LineTo(х, у) координаты , чтобы определить конец строки

Нарисуйте линию мы должны использовать «чернила» методы, такие как инсульт ().

примеров

Определить начальные координаты (0,0), и конечные координаты (200, 100), а затем использовать метод инсульта (), чтобы нарисовать линию:

Ваш браузер не поддерживает HTML5 <Canvas> элемент.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

Попробуйте »

Нарисуйте круг на холсте, мы будем использовать следующий метод:

  • дуга (х, у, г, старт, стоп)

На самом деле, мы использовали «чернила» подход при рисовании круга, такие как инсульт () или заполнить ().

примеров

Использование дуги () метод рисования окружности:

Ваш браузер не поддерживает HTML5 <Canvas> элементы.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

Попробуйте »

Холст - Текст

Используйте холст для рисования текста, важные свойства и методы следующим образом:

  • Шрифт - определить шрифт
  • fillText (текст, х, у)- Рисует твердый текст на холсте
  • strokeText (текст, х, у)- рисунок на холсте полый текст

Используйте fillText ():

примеров

Используйте "Arial" шрифт рендеринга текста высокой 30px (сплошная линия) на холсте:

Ваш браузер не поддерживает HTML5 <Canvas> элемент.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

Попробуйте »

Используйте strokeText ():

примеров

Используйте "Arial" шрифт рендеринга текста высокого 30px (пустотелый) на холсте:

Ваш браузер не поддерживает HTML5 <Canvas> элемент.

JavaScript:

var c=document.getElementById("myCanvas");
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 ():

примеров

Создать линейный градиент. Использование градиентной заливки прямоугольника:

Ваш браузер не поддерживает HTML5 <Canvas> элемент.

JavaScript:

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

Попробуйте »

Используйте createRadialGradient ():

примеров

Создание радиального / кругового градиента. Использование градиентной заливки прямоугольника:

Ваш браузер не поддерживает HTML5 <Canvas> элемент.

JavaScript:

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

Попробуйте »

Холст - Изображения

Одно изображение на холсте, используя следующие методы:

  • DrawImage(образ, х, у)

Используйте изображение:

Крик

примеров

Изображение помещается на холсте:

Ваш браузер не поддерживает HTML5 <Canvas> элемент.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

Попробуйте »

HTML Canvas Справочное руководство

Полное свойство этикетке может ссылаться Canvas справочное руководство.

HTML <холст> Тег

Tag 描述
<canvas> HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

Горячие учебники

Contact US

Холст HTML5
10/30