JavaScript-приложения

Материал из Department of Theoretical and Applied Mechanics
Версия от 18:53, 8 марта 2015; Wikiadmin (обсуждение | вклад) (Замена текста — «<source lang="(.*)" first-line="(.*)">» на «<syntaxhighlight lang="$1" line start="$2" enclose="div">»)

Перейти к: навигация, поиск
Виртуальная лаборатория > JavaScript-приложения

Случайное блуждание

Это приложение - аналог вот этого flash-приложения, написанный на JavaScript


Не удается найти HTML-файл Random_walk_TM.html


Не удается найти HTML-файл Random_walk_TM_400x300_1.html
Не удается найти HTML-файл Random_walk_TM_400x300_2.html
Не удается найти HTML-файл Random_walk_TM_400x300_3.html


Текст программы на языке JavaScript (разработчик Цветков Денис): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default"> Файл "random_walk.js" <syntaxhighlight lang="javascript" line start="1" enclose="div"> // canvas передается аргументом для того, чтобы была возможность запускать скрипт на несколько canvas'ов function MainRW(canvas) {

   var context = canvas.getContext("2d");
   var start = 0;
   var d, x, y;
   var w = canvas.width;
   var h = canvas.height;
   setInterval(tick, 30);


   function Rand() {
       return Math.floor(3 * Math.random()) - 1;
   }
   function tick() {
       if (start == 0) {
           start = 1;
           d = 10;
           x = w / 2;
           y = h / 2;
       }
       else {
           x = x + d * Rand();
           y = y + d * Rand();
           if (x < 0) x = x + w;
           if (x > w-10) x = x - w;
           if (y < 0) y = y + h;
           if (y > h-10) y = y - h;
       }
       context.fillStyle = "rgb("+
           Math.floor(Math.random()*256)+","+
           Math.floor(Math.random()*256)+","+
           Math.floor(Math.random()*256)+")";
       context.beginPath();
       context.rect(x, y, d-1, d-1);
       context.closePath();
       context.fill();
   }

} </source> Файл "random_walk.html" <syntaxhighlight lang="html" line start="1" enclose="div"> <html> <head>

   <script src="random_walk.js" type="text/javascript"></script>

</head> <body onload="MainRW(document.getElementById('canvasRW'));">

   <canvas id="canvasRW" width="800" height="600" style="border:1px solid #dddddd;"></canvas>

</body> </html> </source> </toggledisplay>

Использование мыши

Это приложение - аналог вот этого flash-приложения, написанный на JavaScript


Не удается найти HTML-файл mouse_use_TM.html


Текст программы на языке JavaScript (разработчик Цветков Денис, использована библиотека oCanvas): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default"> Файл "mouse_use.js" <syntaxhighlight lang="javascript" line start="1" enclose="div"> 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" <syntaxhighlight lang="html" line start="1" enclose="div"> <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" <syntaxhighlight lang="html" line start="1" enclose="div"> <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 добавить следующие строки:

<syntaxhighlight lang="html" line start="1" enclose="div">

   // скрипт добавится на страничку в <head></head>

Не удается найти HTML-файл random_walk_TM.html
// содержимое специального HTML-файла добавится на страницу </source> Примечание 1. Не называйте стартовую функцию Main() - она будет пересекаться с уже имеющимися скриптами движка сайта.

Примечание 2. Не используйте точки в названии файла со скриптом - движок сервера не обработает такой файл.

Примечание 3. Можно оформить весь скрипт в htmlet

См. также