Обработчик события на кнопку

@Loka13 · Регистрация: 23.12.2010

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

При загрузке страницы на канве рисуется фигура и ее можно всячески модифицировать. Мне надо сделать так, чтобы при загрузке страница была пустая,а фигура появлялась при нажатии на кнопку. Рисую на canvas. Помогите,пожалуйста.

KOPOJI · 02.03.2013, 19:17

ну так заключите все это в событие onclick.. В чем именно проблема?

@Loka13 · 02.03.2013, 19:56 **[ТС]**

Сообщение от KOPOJI

ну так заключите все это в событие onclick.. В чем именно проблема?

я так и делаю,пишу <input type="button" value="Fig" onClick="createFig(center, maxRadius, points)" > она не работает..
вот код:

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/paperscript"  canvas="canvas-1">
var values = {
    paths: 1, // всего фигур
    minPoints: 5, // минимум точек на фигуре
    maxPoints: 5, // макс тосек на фигуре
    minRadius: 40,
    maxRadius: 50
};
 
var hitOptions = {
    segments: true,
    stroke: true, // чтобы можно было менять фигуру по точкам
    fill: true, // сдвинуть фигуру с места
    tolerance: 5 // насколько алгоритм может отойти от первонач-го пути
};
 
var radiusDelta = values.maxRadius - values.minRadius;
var pointsDelta = values.maxPoints - values.minPoints;
for (var i = 0; i < values.paths; i++) {
    var radius = values.minRadius + Math.random() * radiusDelta;
    var points = values.minPoints + Math.floor(Math.random() * pointsDelta);
    var path = createBlob(view.size * 0.5, radius, points); // creates a blob on a one place
    var lightness = 0.5;
    var hue = 0.56 * 360; // задает цвет фигуры
    path.style = {
        fillColor: new HslColor(hue, 0.5, lightness), //design blob
        strokeColor: path.hue
    };
};
        // creates a blob 
function createBlob(center, maxRadius, points) { 
    var path = new Path(); // constructor
    path.closed = true; // connects the first and last segments
    for (var i = 0; i < points; i++) {
        var delta = new Point({
            length: (maxRadius * 0.5) + (Math.random() * maxRadius * 0.5),
            angle: (360 / points) * i
        });
        path.add(center + delta);
    }
    path.smooth();
    return path;
}
 
var segment, path;
var movePath = false;
function onMouseDown(event) {
    segment = path = null;
    var hitResult = project.hitTest(event.point, hitOptions);
 
    if (event.modifiers.shift) {
        if (hitResult.type == 'segment') {
            hitResult.segment.remove();
        };
        return;
    }
 
    if (hitResult) {
        path = hitResult.item;
        if (hitResult.type == 'segment') {
            segment = hitResult.segment;
        } else if (hitResult.type == 'stroke') {
            var location = hitResult.location;
            segment = path.insert(location.index + 1, event.point);
            path.smooth();
        }
    }
    movePath = hitResult.type == 'fill';
    if (movePath)
        project.activeLayer.addChild(hitResult.item);
}
 
function onMouseMove(event) {
    var hitResult = project.hitTest(event.point, hitOptions);
    project.activeLayer.selected = false;
    if (hitResult && hitResult.item)
        hitResult.item.selected = true;
}
 
function onMouseDrag(event) {
    if (segment) {
        segment.point = event.point;
        path.smooth();
    }
 
    if (movePath)
        path.position += event.delta;
}</script>
</head>
<!-- Определяет имя класса, которое позволяет связать тег со стилевым оформлением-->
<body class="fullscreen"> 
<input type="button" value="Blob" onClick="createBlob(center, maxRadius, points)" >
<div class="canvas"><canvas resize="true" id="canvas-1" style="background:white"></canvas></div>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@Loka13 0 / 0 / 0 Регистрация: 23.12.2010 Сообщений: 17

	Обработчик события на кнопку 02.03.2013, 18:48. Показов 895. Ответов 2 Метки нет (Все метки) При загрузке страницы на канве рисуется фигура и ее можно всячески модифицировать. Мне надо сделать так, чтобы при загрузке страница была пустая,а фигура появлялась при нажатии на кнопку. Рисую на canvas. Помогите,пожалуйста. 0

KOPOJI Почетный модератор 16844 / 6724 / 880 Регистрация: 12.06.2012 Сообщений: 19,967
	02.03.2013, 19:17
	ну так заключите все это в событие onclick.. В чем именно проблема? 0