Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.09.2020, 17:20
Аспирант
Отправить личное сообщение для Alena_03 Посмотреть профиль Найти все сообщения от Alena_03
 
Регистрация: 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>
Изображения:
Тип файла: png Рисунок1.png (1.1 Кб, 3 просмотров)
Тип файла: png Рисунок2.png (938 байт, 2 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 26.09.2020, 18:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Alena_03,
а гугля расспросить?
Ответить с цитированием
  #3 (permalink)  
Старый 26.09.2020, 18:42
Аспирант
Отправить личное сообщение для Alena_03 Посмотреть профиль Найти все сообщения от Alena_03
 
Регистрация: 06.09.2020
Сообщений: 57

рони, поиски оказались безуспешны, только не глумитесь) не нашла ничего дельного
Ответить с цитированием
  #4 (permalink)  
Старый 26.09.2020, 18:46
Аспирант
Отправить личное сообщение для Alena_03 Посмотреть профиль Найти все сообщения от Alena_03
 
Регистрация: 06.09.2020
Сообщений: 57

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

Последний раз редактировалось Alena_03, 26.09.2020 в 18:54.
Ответить с цитированием
  #5 (permalink)  
Старый 26.09.2020, 18:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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.
Ответить с цитированием
  #6 (permalink)  
Старый 26.09.2020, 19:05
Аспирант
Отправить личное сообщение для Alena_03 Посмотреть профиль Найти все сообщения от Alena_03
 
Регистрация: 06.09.2020
Сообщений: 57

рони, спасибо огромное вам, в который раз выручаете
Ответить с цитированием
  #7 (permalink)  
Старый 26.09.2020, 19:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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

Последний раз редактировалось рони, 26.09.2020 в 19:28.
Ответить с цитированием
  #8 (permalink)  
Старый 27.09.2020, 12:09
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 1,004

рони,

есть же fillRect специально для такого)
вместо beginPath -> rect -> fill
Ответить с цитированием
  #9 (permalink)  
Старый 27.09.2020, 14:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Alexandroppolus,
спасибо за подсказку, исправил код.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Можно ли использовать анимацию svg внутри canvas? Negotiant Общие вопросы Javascript 0 30.08.2017 10:56
Повтор фото (getUserMedia(),HTML5 Canvas) aspex Элементы интерфейса 1 27.12.2014 16:46
Почему неправильно вырисовывается canvas? Amateur Events/DOM/Window 0 19.09.2012 10:45
Создание экземпляра Canvas не затрагивая HTML Tails Общие вопросы Javascript 2 09.03.2012 13:55
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 10:16