33. Добавяне на графични елементи в HTML с JavaScript

 

Теоретични материали

Презентация 1

Графични елементи в HTML

HTML елемент Canvas

Canvas е HTML елемент, който позволява създаването на динамични графики и изображения на уеб страници. Той е като празно платно, върху което можете да рисувате с помощта на JavaScript.

 

Основни понятия

  • Елемент Canvas: Етикетът <canvas> се използва за дефиниране на елемент canvas. Той има два важни атрибута: width и height. Тези атрибути определят размера на платното в пиксели.
  • Контекст на Canvas (Context): Контекстът на canvas предоставя методи за рисуване върху платното. Можете да получите контекста чрез свойството getContext('2d') на елемента canvas.

 

Методи за рисуване

Контекстът на canvas предлага различни методи за рисуване форми, линии, текст и изображения върху платното. Ето някои от най-често използваните методи:

  • fillRect(x, y, width, height): Запълва правоъгълна област с определен цвят.
  • strokeRect(x, y, width, height): Очертава правоъгълна област с определен цвят.
  • fillCircle(x, y, radius): Запълва кръг с определен цвят.
  • strokeCircle(x, y, radius): Очертава кръг с определен цвят.
  • moveTo(x, y): Премества текущата точка за рисуване до зададени координати.
  • lineTo(x, y): Свързва текущата точка за рисуване с друга точка, създавайки линия.
  • stroke: Попълва текущата линия с определен цвят.
  • fillStyle: Задава стила на попълване (например цвят) за фигури.
  • strokeStyle: Задава стила на линията (например цвят, дебелина) за линии.
  • fillText(text, x, y): Рисува текст на платното.
  • strokeText(text, x, y): Очертава текст на платното.
  • drawImage(image, x, y): Изчертава изображение върху платното.

 

Ето един прост пример, който показва как да нарисувате червен правоъгълник и син кръг върху canvas:

 

<!DOCTYPE html>
<html>
<head>
<title>Canvas </title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #ccc;"></canvas>

<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// Задаване на червен цвят за попълване
ctx.fillStyle = "#ff0000";

// Рисуване на червен правоъгълник
ctx.fillRect(20, 20, 150, 50);

// Задаване на син цвят за линията
ctx.strokeStyle = "#0000ff";

// Рисуване на син кръг
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
</script>

</body>
</html>

 

Това е само основен пример за това какво можете да постигнете с Canvas. Можете да използвате тези методи за създаване на сложни графики, анимации и интерактивни елементи за вашите уеб страници.

 

 

Задача за упражнение

Използвайте готовия HTML документ, в който има добавено поле Canva.
Създайте JavaScript, с който да нарисувате българското знаме

Добавете и надпис "Република България".

Примерен вид на крайният резултат:
Примерен вид на решената задача: