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

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

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

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

Свойство 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

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>