Тег canvas HTML 5 - httpdoc.ru

HTML холст

Холст HTML используется для рисования графики на веб-странице. <canvas> Тег используется для создания графики с помощью помощью языка сценариев , как JavaScript. <canvas> Элемент является контейнером для графики. На холсте есть несколько методов рисования контуров, прямоугольников, кругов, текста и добавления изображений.


HTML-тег Canvas

Пример
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> HTML Canvas Tag </title>
</head>
<body>

<canvas id="Canvas" width="300" height="100" style="border:1px solid;">  
</canvas>   

</body>
</html>

Выход

HTML Canvas Tag Examples

Примечание. Для определения размера холста всегда необходимо указывать идентификатор и атрибут высоты и ширины.


Метод Canvas lineTo ()

lineTo() Метод добавляет новую точку и создает линию до этой точки от последней заданной точки в полотне. Он не рисует линию, а только создает точку. Если вы хотите нарисовать прямую линию на холсте, следует использовать эти три метода соответственно.

  • moveTo (x, y): используется для определения начальной точки линии.
  • lineTo (x, y): используется для определения конечной точки линии.
  • stroke (): используется для рисования линии от начальной точки до конечной точки.
Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML Canvas Lineto Method </title>	
</head>
<body>

<canvas id="Canvas" width="400" height="150" style="border:1px solid green;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
  var c = document.getElementById("Canvas");
  var ctx = c.getContext("2d");
   ctx.beginPath();
   ctx.moveTo(0, 0);
   ctx.lineTo(400, 150);
   ctx.stroke();
</script>

</body>
</html>

Выход

HTML Canvas Lineto Method Ваш браузер не поддерживает тег холста HTML5.

Canvas arc () Метод

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML Canvas Arc Method </title>	
</head>
<body>

<canvas id="Canvas" width="300" height="150" style="border:1px solid green;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

  var c = document.getElementById("Canvas");
  var ctx = c.getContext("2d");
   ctx.beginPath();
   ctx.arc(100, 75, 50, 0, 2 * Math.PI);
   ctx.stroke();

</script> 

</body>
</html>

Выход

HTML Canvas Arc Method Example Ваш браузер не поддерживает тег холста HTML5.

Canvas fill () Метод

fill() Метод заполняет текущий чертеж с цветом. Цвет по умолчанию - черный.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML Canvas fil() Method </title>	
</head>
<body>

<canvas id="Canvas" width="300" height="150" style="border:1px solid blue">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

 var c = document.getElementById("Canvas");
 var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.rect(20, 20, 150, 100);
  ctx.fillStyle = "lightblue";
  ctx.fill();

  ctx.beginPath();
  ctx.rect(40, 40, 150, 100);
  ctx.fillStyle = "orange";
  ctx.fill();

</script> 

</body>
</html>

Выход

HTML Canvas fil() Method Examples Ваш браузер не поддерживает тег холста HTML5.

Свойство шрифта холста ()

Свойство font устанавливает или возвращает текущие свойства шрифта для текстового содержимого на холсте.

  • Свойство шрифта: используется для определения свойства шрифта (начертание шрифта, размер шрифта) для текста.
  • fillText (text, x, y) метод: используется для отображения заполненного текста на холсте. Выглядит жирным шрифтом.
  • Метод strokeText (text, x, y): он также используется для отображения обычного текста на незаполненном холсте.
Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML Canvas Font Property </title>  
</head>
<body>

<canvas id="Canvas" width="300" height="150" style="border:1px solid gray">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

 var c = document.getElementById("Canvas");
 var ctx = c.getContext("2d");
  ctx.font = "30px Arial";
  ctx.fillText("Hello HTML 5!", 50, 80);

</script>

</body>
</html>

Выход

HTML Canvas Font Property Example Ваш браузер не поддерживает тег холста HTML5.

HTML Canvas fillStyle () Свойство

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML Canvas fillstyle() Property Example </title>  
</head>
<body>

<canvas id="Canvas" width="350" height="150" style="border:1px solid gray;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
 var c = document.getElementById("Canvas");
 var ctx = c.getContext("2d");
  ctx.fillStyle = "green";
  ctx.fillRect(20, 20, 150, 100);
</script>

</body>
</html>

Выход

HTML Canvas fillstyle() Property Example Ваш браузер не поддерживает тег холста HTML5.

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

Элемент
Microsoft Edge browser.png Край
Chrome browser.png Хром
Firefox browser.png Fire Fox
Opera browser.png Опера
safari browser.png Сафари
<canvas>
да
да
да
да
да