JavaScript-приложения — различия между версиями
Материал из Department of Theoretical and Applied Mechanics
Денис (обсуждение | вклад) |
Денис (обсуждение | вклад) (→Случайное блуждание) |
||
| Строка 3: | Строка 3: | ||
'''''Это приложение - аналог [[Флэш-приложения:_механика|вот этого flash-приложения]], написанный на JavaScript | '''''Это приложение - аналог [[Флэш-приложения:_механика|вот этого flash-приложения]], написанный на JavaScript | ||
| − | <addscript src= | + | <addscript src=Random_walk_v1-1/> |
| + | |||
<htmlet nocache="yes">Random_walk_TM</htmlet> | <htmlet nocache="yes">Random_walk_TM</htmlet> | ||
| + | |||
| + | {| class="simple" border="1" | ||
| + | |<htmlet nocache="yes">Random_walk_TM_400x300_1</htmlet> | ||
| + | |<htmlet nocache="yes">Random_walk_TM_400x300_2</htmlet> | ||
| + | |<htmlet nocache="yes">Random_walk_TM_400x300_3</htmlet> | ||
| + | |} | ||
| + | <br style="clear: both" /> | ||
| Строка 65: | Строка 73: | ||
</source> | </source> | ||
</toggledisplay> | </toggledisplay> | ||
| − | |||
== Использование мыши == | == Использование мыши == | ||
Версия 18:40, 17 февраля 2014
Случайное блуждание
Это приложение - аналог вот этого flash-приложения, написанный на JavaScript
<addscript src=Random_walk_v1-1/>
Не удается найти 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"
function MainRW() {
var canvas = document.getElementById('canvasRW');
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();
}
}
Файл "random_walk.html"
<html>
<head>
<script src="random_walk.js" type="text/javascript"></script>
</head>
<body onload="MainRW();">
<canvas id="canvasRW" width="800" height="600" style="border:1px solid #dddddd;"></canvas>
</body>
</html>
</toggledisplay>
Использование мыши
Это приложение - аналог вот этого flash-приложения, написанный на JavaScript
<addscript src=ocanvas-251/> <addscript src=mouse_use/>
Не удается найти HTML-файл mouse_use_TM.html
Текст программы на языке JavaScript (разработчик Цветков Денис, использована библиотека oCanvas): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default">
Файл "mouse_use.js"
function MainMU() {
var canvas = document.getElementById('canvasMU');
var context = canvas.getContext("2d");
var w = canvas.width;
var h = canvas.width;
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*2,
width: 2*r,
height: 2*r,
fill: "rgba(255, 0, 0, 1)"
});
var arc = canvas.display.arc({
x: 5*r,
y: y0-r,
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)";}
});
}
Файл "mouse_use.html"
<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>
</toggledisplay>
