Редактирование: Простейшие интернет-программы
Внимание! Вы не авторизовались на сайте. Ваш IP-адрес будет публично видимым, если вы будете вносить любые правки. Если вы войдёте или создадите учётную запись, правки вместо этого будут связаны с вашим именем пользователя, а также у вас появятся другие преимущества.
Правка может быть отменена. Пожалуйста, просмотрите сравнение версий, чтобы убедиться, что это именно те изменения, которые вас интересуют, и нажмите «Записать страницу», чтобы изменения вступили в силу.
Текущая версия | Ваш текст | ||
Строка 5: | Строка 5: | ||
'''''Это приложение - аналог [[Флэш-приложения:_механика|вот этого flash-приложения]], написанный на JavaScript | '''''Это приложение - аналог [[Флэш-приложения:_механика|вот этого flash-приложения]], написанный на JavaScript | ||
− | + | <addscript src=Random_walk_v1-1/> | |
{| class="simple" border="1" | {| class="simple" border="1" | ||
− | |<htmlet nocache="yes"> | + | |<htmlet nocache="yes">Random_walk_TM</htmlet> |
|} | |} | ||
{| class="simple" border="1" | {| class="simple" border="1" | ||
− | |<htmlet nocache="yes"> | + | |<htmlet nocache="yes">Random_walk_TM_400x300_1</htmlet> |
− | |<htmlet nocache="yes"> | + | |<htmlet nocache="yes">Random_walk_TM_400x300_2</htmlet> |
− | |<htmlet nocache="yes"> | + | |<htmlet nocache="yes">Random_walk_TM_400x300_3</htmlet> |
|} | |} | ||
− | + | Текст программы на языке JavaScript (разработчик [[Цветков Денис]]): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default"> | |
− | |||
Файл '''"random_walk.js"''' | Файл '''"random_walk.js"''' | ||
− | < | + | <source lang="javascript" first-line="1"> |
// canvas передается аргументом для того, чтобы была возможность запускать скрипт на несколько canvas'ов | // canvas передается аргументом для того, чтобы была возможность запускать скрипт на несколько canvas'ов | ||
function MainRW(canvas) { | function MainRW(canvas) { | ||
Строка 66: | Строка 65: | ||
} | } | ||
} | } | ||
− | </ | + | </source> |
Файл '''"random_walk.html"''' | Файл '''"random_walk.html"''' | ||
− | < | + | <source lang="html" first-line="1"> |
<html> | <html> | ||
<head> | <head> | ||
Строка 77: | Строка 76: | ||
</body> | </body> | ||
</html> | </html> | ||
− | </ | + | </source> |
− | </ | + | </toggledisplay> |
− | |||
== Использование мыши == | == Использование мыши == | ||
− | '' | + | '''''Это приложение - аналог [[Флэш-приложения: техника программирования|вот этого flash-приложения]], написанный на JavaScript |
+ | |||
+ | <addscript src=ocanvas-251/> | ||
+ | <addscript src=mouse_use/> | ||
+ | <htmlet nocache="yes">mouse_use_TM</htmlet> | ||
+ | |||
+ | |||
+ | Текст программы на языке JavaScript (разработчик [[Цветков Денис]], использована библиотека [http://ocanvas.org/ oCanvas]): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default"> | ||
+ | Файл '''"mouse_use.js"''' | ||
+ | <source lang="javascript" first-line="1"> | ||
+ | function MainMU() { | ||
+ | var canvas = document.getElementById('canvasMU'); | ||
+ | var context = canvas.getContext("2d"); | ||
+ | |||
+ | var w = canvas.width; | ||
+ | var h = canvas.height; | ||
+ | |||
+ | var y0 = h / 2; | ||
+ | var r = w / 7; | ||
+ | |||
+ | var canvas = oCanvas.create({ | ||
+ | canvas: "#canvasMU", | ||
+ | fps: 60 | ||
+ | }); | ||
+ | |||
+ | var rectangle = canvas.display.rectangle({ | ||
+ | x: r, | ||
+ | y: y0-r, | ||
+ | width: 2*r, | ||
+ | height: 2*r, | ||
+ | fill: "rgba(255, 0, 0, 1)" | ||
+ | }); | ||
+ | |||
+ | var arc = canvas.display.arc({ | ||
+ | x: 5*r, | ||
+ | y: y0, | ||
+ | radius: r, | ||
+ | start: 0, | ||
+ | end: 360, | ||
+ | fill: "rgba(0, 0, 255, 1)" | ||
+ | }); | ||
+ | |||
+ | canvas.addChild(rectangle); | ||
+ | canvas.addChild(arc); | ||
+ | |||
+ | rectangle.dragAndDrop({ | ||
+ | changeZindex: true,, | ||
+ | move: function () {this.fill = "rgba(255, 0, 0, 0.5)";}, | ||
+ | end: function () {this.fill = "rgba(255, 0, 0, 1)";} | ||
+ | }); | ||
+ | arc.dragAndDrop({ | ||
+ | changeZindex: true, | ||
+ | move: function () {this.fill = "rgba(0, 0, 255, 0.5)";}, | ||
+ | end: function () {this.fill = "rgba(0, 0, 255, 1)";} | ||
+ | }); | ||
+ | } | ||
+ | </source> | ||
+ | Файл '''"mouse_use.html"''' | ||
+ | <source lang="html" first-line="1"> | ||
+ | <html> | ||
+ | <head> | ||
+ | <script src="http://cdnjs.cloudflare.com/ajax/libs/ocanvas/2.5.1/ocanvas.min.js"></script> | ||
+ | <script src="mouse_use.js" type="text/javascript"></script> | ||
+ | </head> | ||
+ | <body onload="MainMU();"> | ||
+ | <canvas id="canvasMU" width="400" height="300" style="border:1px solid #dddddd;"></canvas> | ||
+ | </body> | ||
+ | </html> | ||
+ | </source> | ||
+ | </toggledisplay> | ||
+ | |||
+ | == Как самому выложить сюда скрипт == | ||
+ | |||
+ | |||
+ | Один из способов выложить скрипт, использующий canvas, на страничку сайта tm.spbstu.ru: | ||
+ | |||
+ | * Оформить в скрипте стартовую функцию (как в примерах на этой страничке) | ||
+ | * Сделать специальный HTML-файл для плагина HTMLets. Например: | ||
+ | Файл '''"random_walk_TM.html"''' | ||
+ | <source lang="html" first-line="1"> | ||
+ | <canvas id="canvasRW" width="800" height="600"></canvas> | ||
+ | <script type="text/javascript">MainRW(document.getElementById('canvasRW'));</script> // MainRW(...) - стартовая функция скрипта | ||
+ | </source> | ||
+ | * Загрузить скрипт на сервер в папку jsscripts, а HTML файл - в папку htmlets | ||
+ | '' Примечание. Для того, чтобы загрузить файлы на сервер, обратитесь к [[Панченко_Артём|администратору]] | ||
+ | * При верстке странички на tm.spbstu.ru добавить следующие строки: | ||
+ | <source lang="html" first-line="1"> | ||
+ | <addscript src=random_walk/> // скрипт добавится на страничку в <head></head> | ||
+ | <htmlet nocache="yes">random_walk_TM</htmlet> // содержимое специального HTML-файла добавится на страницу | ||
+ | </source> | ||
+ | '' Примечание 1. Не называйте стартовую функцию Main() - она будет пересекаться с уже имеющимися скриптами движка сайта. | ||
+ | |||
+ | '' Примечание 2. Не используйте точки в названии файла со скриптом - движок сервера не обработает такой файл. | ||
− | + | '' Примечание 3. Можно оформить весь скрипт в htmlet | |
== См. также == | == См. также == | ||
− | *[[ | + | *[[JavaScript-пружина]] |
+ | *[[JavaScript-mechanics]] | ||
+ | *[[JavaScript-mechanics-box2D]] | ||
[[Category: Виртуальная лаборатория]] | [[Category: Виртуальная лаборатория]] | ||
[[Category: Программирование]] | [[Category: Программирование]] | ||
[[Category: JavaScript]] | [[Category: JavaScript]] |