26.09.2020, 17:20
|
|
Аспирант
|
|
Регистрация: 06.09.2020
Сообщений: 57
|
|
|
Canvas фигруры
Всем привет, задание на фото. Не пойму как нарисовать второй квадрат под первым и центрировать их(align?), а с сеткой вообще не понимаю как быть
Мой код:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<canvas id="canvas" width="400" height="400" style="background: #F4F4F4;"></canvas>
<script>
var ctx = document.getElementById('canvas').getContext('2d');
ctx.rect(50, 50, 100, 100);
ctx.fillStyle = 'green';
ctx.fill();
</script>
</body>
</html>
|
|
26.09.2020, 18:21
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
Alena_03,
а гугля расспросить?
|
|
26.09.2020, 18:42
|
|
Аспирант
|
|
Регистрация: 06.09.2020
Сообщений: 57
|
|
|
рони, поиски оказались безуспешны, только не глумитесь) не нашла ничего дельного
|
|
26.09.2020, 18:46
|
|
Аспирант
|
|
Регистрация: 06.09.2020
Сообщений: 57
|
|
|
рони, как я понимаю просто нужно точку определить, откуда начать вторую фигуру, но что-то не получается изменить цвет, постоянно к двум фигурам применяет последний цвет
Последний раз редактировалось Alena_03, 26.09.2020 в 18:54.
|
|
26.09.2020, 18:55
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
Alena_03,
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#canvas {
background-color: #F4F4F4;
}
#canvas-container{
text-align: center;
}
</style>
</head>
<body>
<div id="canvas-container">
<canvas id="canvas" width="400" height="400" ></canvas>
</div>
<script>
var elem = document.getElementById('canvas');
var ctx = elem.getContext('2d');
var width = elem.width,
distance = 100, // размер квадрата
padding = 65; // расстояние между квадратами
var x = (width - distance) / 2;
var y = (width - distance * 2 - padding) / 2;
var y2 = y + padding + distance;
ctx.fillStyle = 'green';
ctx.fillRect(x, y, distance, distance);
ctx.fillStyle = 'red';
ctx.fillRect(x, y2, distance, distance);
distance = 300; // размер сетки
var d = 15; // размер ячейки
var m = (d/2|0) + .5;
var k = (width - distance) / 2 + m;
var endDistance = k + distance - m;
for (var x = k; x < endDistance ; x += d) {
ctx.moveTo(x, k - m);
ctx.lineTo(x, endDistance);
ctx.moveTo(k - m , x );
ctx.lineTo(endDistance, x );
}
ctx.strokeStyle = '#3300FF';
ctx.stroke();
</script>
</body>
</html>
Последний раз редактировалось рони, 27.09.2020 в 14:44.
|
|
26.09.2020, 19:05
|
|
Аспирант
|
|
Регистрация: 06.09.2020
Сообщений: 57
|
|
рони, спасибо огромное вам, в который раз выручаете 
|
|
26.09.2020, 19:12
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
Alena_03,
код выше изменён, добавил размеры квадратов и сетки.
Последний раз редактировалось рони, 26.09.2020 в 19:28.
|
|
27.09.2020, 12:09
|
 |
Профессор
|
|
Регистрация: 25.10.2016
Сообщений: 1,013
|
|
|
рони,
есть же fillRect специально для такого)
вместо beginPath -> rect -> fill
|
|
27.09.2020, 14:46
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
Alexandroppolus,
спасибо за подсказку, исправил код.
|
|
|
|
