@jerad.kuphal
Вот пример кода, который рисует ромб на JavaScript с использованием HTML5 Canvas:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
// Получаем ссылку на холст var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // Задаем координаты вершин ромба var x = canvas.width / 2; var y = canvas.height / 2; var width = 100; var height = 100; // Очищаем холст context.clearRect(0, 0, canvas.width, canvas.height); // Начинаем рисовать путь context.beginPath(); // Перемещаемся к верхней точке context.moveTo(x, y - (height / 2)); // Рисуем линию вправо context.lineTo(x + (width / 2), y); // Рисуем линию вниз context.lineTo(x, y + (height / 2)); // Рисуем линию влево context.lineTo(x - (width / 2), y); // Закрываем путь context.closePath(); // Устанавливаем цвет заливки context.fillStyle = 'blue'; // Заливаем ромб context.fill(); // Рисуем контур ромба context.lineWidth = 2; context.strokeStyle = 'black'; context.stroke(); |
Вы должны создать HTML-элемент <canvas>
на странице с заданным идентификатором (myCanvas)
.
1
|
Этот код рисует ромб с координатами вершин (x, y)
шириной 100 пикселей и высотой 100 пикселей. Цвет заливки ромба установлен на синий, а контур имеет черный цвет. Вы можете настроить эти параметры по своему усмотрению.