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"
1 // canvas передается аргументом для того, чтобы была возможность запускать скрипт на несколько canvas'ов
2 function MainRW(canvas) {
3 var context = canvas.getContext("2d");
4
5 var start = 0;
6 var d, x, y;
7 var w = canvas.width;
8 var h = canvas.height;
9
10 setInterval(tick, 30);
11
12
13 function Rand() {
14 return Math.floor(3 * Math.random()) - 1;
15 }
16
17 function tick() {
18 if (start == 0) {
19 start = 1;
20 d = 10;
21 x = w / 2;
22 y = h / 2;
23 }
24 else {
25 x = x + d * Rand();
26 y = y + d * Rand();
27 if (x < 0) x = x + w;
28 if (x > w-10) x = x - w;
29 if (y < 0) y = y + h;
30 if (y > h-10) y = y - h;
31 }
32
33 context.fillStyle = "rgb("+
34 Math.floor(Math.random()*256)+","+
35 Math.floor(Math.random()*256)+","+
36 Math.floor(Math.random()*256)+")";
37 context.beginPath();
38 context.rect(x, y, d-1, d-1);
39 context.closePath();
40 context.fill();
41 }
42 }
Файл "random_walk.html"
1 <html>
2 <head>
3 <script src="random_walk.js" type="text/javascript"></script>
4 </head>
5 <body onload="MainRW(document.getElementById('canvasRW'));">
6 <canvas id="canvasRW" width="800" height="600" style="border:1px solid #dddddd;"></canvas>
7 </body>
8 </html>
</toggledisplay>
Использование мыши[править]
Это приложение - аналог вот этого flash-приложения, написанный на JavaScript
Текст программы на языке JavaScript (разработчик Цветков Денис, использована библиотека oCanvas): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default">
Файл "mouse_use.js"
1 function MainMU() {
2 var canvas = document.getElementById('canvasMU');
3 var context = canvas.getContext("2d");
4
5 var w = canvas.width;
6 var h = canvas.height;
7
8 var y0 = h / 2;
9 var r = w / 7;
10
11 var canvas = oCanvas.create({
12 canvas: "#canvasMU",
13 fps: 60
14 });
15
16 var rectangle = canvas.display.rectangle({
17 x: r,
18 y: y0-r,
19 width: 2*r,
20 height: 2*r,
21 fill: "rgba(255, 0, 0, 1)"
22 });
23
24 var arc = canvas.display.arc({
25 x: 5*r,
26 y: y0,
27 radius: r,
28 start: 0,
29 end: 360,
30 fill: "rgba(0, 0, 255, 1)"
31 });
32
33 canvas.addChild(rectangle);
34 canvas.addChild(arc);
35
36 rectangle.dragAndDrop({
37 changeZindex: true,,
38 move: function () {this.fill = "rgba(255, 0, 0, 0.5)";},
39 end: function () {this.fill = "rgba(255, 0, 0, 1)";}
40 });
41 arc.dragAndDrop({
42 changeZindex: true,
43 move: function () {this.fill = "rgba(0, 0, 255, 0.5)";},
44 end: function () {this.fill = "rgba(0, 0, 255, 1)";}
45 });
46 }
Файл "mouse_use.html"
1 <html>
2 <head>
3 <script src="http://cdnjs.cloudflare.com/ajax/libs/ocanvas/2.5.1/ocanvas.min.js"></script>
4 <script src="mouse_use.js" type="text/javascript"></script>
5 </head>
6 <body onload="MainMU();">
7 <canvas id="canvasMU" width="400" height="300" style="border:1px solid #dddddd;"></canvas>
8 </body>
9 </html>
</toggledisplay>
Как самому выложить сюда скрипт[править]
Один из способов выложить скрипт, использующий canvas, на страничку сайта tm.spbstu.ru:
- Оформить в скрипте стартовую функцию (как в примерах на этой страничке)
- Сделать специальный HTML-файл для плагина HTMLets. Например:
Файл "random_walk_TM.html"
1 <canvas id="canvasRW" width="800" height="600"></canvas>
2 <script type="text/javascript">MainRW(document.getElementById('canvasRW'));</script> // MainRW(...) - стартовая функция скрипта
- Загрузить скрипт на сервер в папку jsscripts, а HTML файл - в папку htmlets
Примечание. Для того, чтобы загрузить файлы на сервер, обратитесь к администратору
- При верстке странички на tm.spbstu.ru добавить следующие строки:
1 // скрипт добавится на страничку в <head></head>
2 <htmlet nocache="yes">random_walk_TM</htmlet> // содержимое специального HTML-файла добавится на страницу
Примечание 1. Не называйте стартовую функцию Main() - она будет пересекаться с уже имеющимися скриптами движка сайта.
Примечание 2. Не используйте точки в названии файла со скриптом - движок сервера не обработает такой файл.
Примечание 3. Можно оформить весь скрипт в htmlet
