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>
|
Alena_03,
а гугля расспросить? |
рони, поиски оказались безуспешны, только не глумитесь) не нашла ничего дельного
|
рони, как я понимаю просто нужно точку определить, откуда начать вторую фигуру, но что-то не получается изменить цвет, постоянно к двум фигурам применяет последний цвет
|
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>
|
рони, спасибо огромное вам, в который раз выручаете:thanks:
|
Alena_03,
код выше изменён, добавил размеры квадратов и сетки. |
рони,
есть же fillRect специально для такого) вместо beginPath -> rect -> fill |
Alexandroppolus,
спасибо за подсказку, исправил код. |
| Часовой пояс GMT +3, время: 23:58. |