Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Canvas фигруры (https://javascript.ru/forum/misc/81083-canvas-figrury.html)

Alena_03 26.09.2020 18:20

Canvas фигруры
 
Вложений: 2
Всем привет, задание на фото. Не пойму как нарисовать второй квадрат под первым и центрировать их(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 19:21

Alena_03,
а гугля расспросить?

Alena_03 26.09.2020 19:42

рони, поиски оказались безуспешны, только не глумитесь) не нашла ничего дельного

Alena_03 26.09.2020 19:46

рони, как я понимаю просто нужно точку определить, откуда начать вторую фигуру, но что-то не получается изменить цвет, постоянно к двум фигурам применяет последний цвет

рони 26.09.2020 19:55

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>

Alena_03 26.09.2020 20:05

рони, спасибо огромное вам, в который раз выручаете:thanks:

рони 26.09.2020 20:12

Alena_03,
код выше изменён, добавил размеры квадратов и сетки.

Alexandroppolus 27.09.2020 13:09

рони,

есть же fillRect специально для такого)
вместо beginPath -> rect -> fill

рони 27.09.2020 15:46

Alexandroppolus,
спасибо за подсказку, исправил код.


Часовой пояс GMT +3, время: 15:30.