<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body style= "margin": 0;>
<p>Геометрические фигуры </p>
<canvas id="canvas" </canvas>
<script>
var
canv = document.getElementById(`canvas`),
ctx = canv.getContext(`2d`); // рисуем в 2d
canv.width = window.innerWidth;
canv.height = window.innerWidth;
//Code Вывод надписей
ctx.fillStyle = `mageta`; //цвет
//ctx.font = `20px Georgia`; // пиксели, название шрифта
ctx.font = `bold 20px Georgia`; // пиксели, название жирного шрифта
ctx.fillText("Копирование фигуры", 100, 20);
// Рисуем ромб
var arr = [50, 150, 250, 350, 450, 550];
console.log(arr); // вывод в консоль массива
console.log(arr[2]); // значение третьего элемента массива
console.log(arr.length); // количество элементов в массиве
ctx.fillStyle = `red`; //цвет внутри
ctx.lineWidth = 1 //толщина линии
ctx.scale(2, 3); // изменение размеров фигуры путём растягивания и сжатия
ctx.rotate(10 * Math.PI/180); // поворот фигуры на 10 градусов
// РОМБ №0..5
for(var i = 0; i < arr.length; ++ i) {
var x0 = arr[i]; // координата x положения фигуры
console.log(x0); // вывод в консоль первого элемента массива
ctx.beginPath();
ctx.moveTo(x0, 25);
ctx.lineTo(x0 + 25, 50);
ctx.lineTo(x0 + 0, 75);
ctx.lineTo(x0 + -25, 50);
ctx.lineTo(x0, 25);
ctx.stroke();
}
</script>
</body>
</html>