Изменение размеров объекта

@Jared · Регистрация: 14.12.2012

Студворк — интернет-сервис помощи студентам

Есть код который рисует домик, окна и дверь и позунок. Требуется добавлять этажи(ряд окон) в зависимость от значения ползунка. Вопрос в том как увеличивать и уменьшать домик.

HTML5
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>House Builder</title>
    <link rel="stylesheet" href="cssStyles.css">
 
    <script>
        function returnSize() {
            sliderFloor = document.getElementById("slider").value;
            console.log(sliderFloor);
            textBox = document.getElementById("textSlider");
            textBox.value = sliderFloor;
 
            house = document.getElementById("house"),
                ctx = house.getContext('2d');
            house.x1 = house.x;
            house.y1 = house.y;
 
            return +sliderFloor;
 
 
        }
 
    </script>
</head>
<body>
 
    <div class="houseBlock">
        <canvas id="house">
            <script>
                var house = document.getElementById("house"),
                    ctx     = house.getContext('2d');
                house.height = 640;
                house.width = 480;
 
                house.x = 180;
                house.y = 200;
 
 
 
                ctx.beginPath();
                ctx.moveTo(120, 40);
                ctx.lineStyle = "red";
                ctx.lineTo(30, 100);
                ctx.lineTo(210, 100);
                ctx.lineTo(120, 40);
                ctx.stroke();
 
//                   paint house
 
                ctx.beginPath();
                ctx.strokeRect(30,100, house.x, house.y);
 
//                    paint windows
                ctx.beginPath();
//                ctx.strokeStyle = "blue";
                ctx.strokeRect(65, 150, 20, 35);
                ctx.strokeRect(155, 150, 20, 35);
                ctx.closePath();
//                paint door
                ctx.beginPath();
//                ctx.strokeStyle = "red";
                ctx.strokeRect(160, 250, 30, 50);
                ctx.closePath();
 
 
            </script>
        </canvas>
    </div>
 
    <div class="slider">
        <label>Количество этажей</label>
        <input type="range" min="1" max="7" id="slider" value="1" oninput="returnSize()">
        <input type="text" id="textSlider" value="1">
    </div>
    <br>
</body>
</html>

@Kaktuz · 24.12.2015, 19:54

Делаешь функцию отрисовки и условно делишь её на три части.
1. Рисует крышу дома.
2. Через цикл рисует нужное количество этажей.
3. Рисует нижнюю часть.

Добавлено через 45 минут
Собственно решение для тех кому интересно.

Кликните здесь для просмотра всего текста

JavaScript
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
42
43
window.onload = function() {
    window.house = document.getElementById("house");
    window.ctx = house.getContext('2d');
    buidHouse(1);
}
function buidHouse(n) {
    house.height = 400+200*n;
    house.width = 400;
    ctx.clearRect(0, 0, house.width, house.height);
    ctx.strokeStyle = "black";
    ctx.lineWidth = 5;
    // Крыша
    ctx.beginPath();
    ctx.moveTo(200,10);
    ctx.lineTo(390,200);
    ctx.lineTo(10,200);
    ctx.closePath();
    ctx.stroke();
    // Этажи
    for (var i=1; i<=n; i++) {
    ctx.beginPath();
    ctx.moveTo(20, i*200);
    ctx.lineTo(20, i*400);
    ctx.moveTo(380, i*200);
    ctx.lineTo(380, i*400);
    ctx.closePath();
    ctx.stroke();
    ctx.strokeRect(70, i*200+50, 80, 100);
    ctx.strokeRect(250, i*200+50, 80, 100);
    }
    // Вход
    ctx.beginPath();
    ctx.moveTo(20, house.height-200);
    ctx.lineTo(20, house.height);
    ctx.moveTo(380, house.height-200);
    ctx.lineTo(380, house.height);
    ctx.moveTo(20, house.height-2);
    ctx.lineTo(380, house.height-2);
    ctx.closePath();
    ctx.stroke();
    ctx.strokeRect(70, house.height-150, 80, 100);
    ctx.strokeRect(250, house.height-150, 80, 150);
}

HTML5
1
2
<form><input type="range" min="0" max="7" value="0" onchange="buidHouse(this.value)"></form>
<canvas id="house"></canvas>

Новые блоги и статьи Все статьи Все блоги /
Как писать чистый, тестируемый и качественный код на Python py-thonny 12.07.2025 Помню свой первый проект на Python. Работал тогда быстро, грязно, лишь бы работало. Код был похож на запутанный клубок - переменные по одной букве, функции на 200 строк, комментарии отсутствовали как. . .	Blazor и контроллер сервопривода IoT Meadow Maple Wired 11.07.2025 Я решил разобраться, как можно соединить современные веб-технологии с миром "железа". Интересная комбинация получилась из Blazor в качестве веб-интерфейса и микроконтроллера Meadow с его веб-сервером. . .	Генерация OpenQASM из кода Q# EggHead 10.07.2025 Летом 2024-го я начал эксперименты с библиотекой Q# Bridge, и знаете что? Она оказалась просто находкой для тех, кто работает на стыке разных квантовых экосистем. Основная фишка этой библиотеки -. . .	Изучаем новый шаблон ИИ-чата .NET AI Chat Web App stackOverflow 10.07.2025 В . NET появилось интересное обновление - новый шаблон ИИ-чата под названием . NET AI Chat Web App. Когда я впервые наткнулся на анонс этого шаблона, то сразу понял, что Microsoft наконец-то. . .	Результаты исследования от команды ARP (июль 2025 г.) Programma_Boinc 10.07.2025 Результаты исследования от команды ARP (июль 2025 г. ) Африканский проект по дождям (ARP) World Community Grid снова запущен! Мы рады поделиться обновленной информацией о нашем прогрессе с осени. . .
Angular vs Svelte - что лучше? Reangularity 09.07.2025 Сегодня рынок разделился на несколько четких категорий: тяжеловесы корпоративного уровня (Angular), гибкие универсалы (React), прогрессивные решения (Vue) и новая волна компилируемых фреймворков. . .	Code First и Database First в Entity Framework UnmanagedCoder 09.07.2025 Entity Framework дает нам свободу выбора, предлагая как Code First, так и Database First подходы. Но эта свобода порождает вечный вопрос — какой подход выбрать? Entity Framework — это. . .	Как использовать Bluetooth-модуль HC-05 с Arduino Wired 08.07.2025 Bluetooth - это технология, созданная чтобы заменить кабельные соединения. Обычно ее используют для связи небольших устройств: мобильных телефонов, ноутбуков, наушников и т. д. Работает она на частоте. . .	Руководство по структурам данных Python AI_Generated 08.07.2025 Я отчетливо помню свои первые серьезные проекты на Python - я писал код, он работал, заказчики были относительно довольны. Но однажды мой наставник, взглянув на мою реализацию поиска по огромному. . .	Тестирование энергоэффективности и скорости вычислений видеокарт в BOINC проектах Programma_Boinc 08.07.2025 Тестирование энергоэффективности и скорости вычислений видеокарт в BOINC проектах Опубликовано: 07. 07. 2025 Рубрика: Uncategorized Автор: AlexA Статья размещается на сайте с разрешения. . .

Опции темы

Изменение размеров объекта

Решение