Canvas. Как сделать или вообще нельзя? Вращение рандомизированно изменяемого объекта.
Как это сделать в canvas? Или вообще не получится?
Пример: - отрисованный объект (не подгружаемый). Например, стрелка заданного размера, цвета (именно нарисованная как пятиугольник). - ориентация "вверх-вниз-влево-вправо". 90 град. Random. - изменение положения объекта (центра) в пределах квадрата со стороной в 2 раза больше длины объекта. Random. Шаг 10 пикселей. - изменение размера объекта. Увеличение/уменьшение с шагом 0,1 от начального размера до в 2-е увеличенного. Random. - таймер 1 секунда, счетчик до 10. Т.е. стрелка каждую секунду меняет свое положение, размер и ориентацию. Не получаются совместные вращения с перемещением центра вращения в центр рандомизированно построенного смещенного объекта. Учусь... Находил примеры для подгружаемых рисунков. Аналогия не получается.. А может и нельзя сделать? М.б. нужны библиотеки или по-другому как-то? |
Я тоже только учусь, но если каждую секунду воздействовать на свойства в CSS (размер, угол вращения), то может получится.. а canvas вроде для цвета, но я точно не утвеждаю.
|
Вот пытаюсь:
<!DOCTYPE HTML>
<html>
<head>
<script>
setInterval(function() {
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
// Очистка холста
context.clearRect(0, 0, canvas.width, canvas.height);
// Размеры квадрата.
var rectWidth = 40;
var rectHeight = 40;
// Расчет угла поворота по часовой стрелке
var q1 = Math.floor((Math.round(Math.random()*10))/4);
var q2 = Math.floor((Math.round(Math.random()*10))/4);
// Расчет смещения стимула по X и Y
var x1 = 20+Math.round((Math.random()*10));
var y1 = 20+Math.round((Math.random()*10));
// var x2 = 100+Math.round(Math.random()*100)/10);
// var y2 = 100+Math.round(Math.random()*100)/10);
// Смещение начала осей координат в центр фигуры
context.translate(canvas.width/2,canvas.height/2);
// Смещение фигуры
context.translate(x1,y1);
//context.translate(-x2,-y2);
// Поворот фигуры
context.rotate(Math.PI/q1);
context.rotate(Math.PI/q2);
// Рисование квадрата
context.fillStyle="#ff0000";
context.fillRect(-rectWidth/2,-rectHeight/2,rectWidth,rectHeight);
// Вставка символа
context.font="30pt Calibri";
context.textAlign="center";
context.fillStyle="#0000ff";
context.fillText("Ю",0,15); }, 200);
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>
|
Цитата:
|
Наверное он просил это (чистый JS):
setInterval(function() {
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
// Очистка холста
context.clearRect(0, 0, canvas.width, canvas.height);
// Размеры квадрата.
var rectWidth = 40;
var rectHeight = 40;
// Расчет угла поворота по часовой стрелке
var q1 = Math.floor((Math.round(Math.random()*10))/4);
var q2 = Math.floor((Math.round(Math.random()*10))/4);
// Расчет смещения стимула по X и Y
var x1 = 20+Math.round((Math.random()*10));
var y1 = 20+Math.round((Math.random()*10));
// var x2 = 100+Math.round(Math.random()*100)/10);
// var y2 = 100+Math.round(Math.random()*100)/10);
// Смещение начала осей координат в центр фигуры
context.translate(canvas.width/2,canvas.height/2);
// Смещение фигуры
context.translate(x1,y1);
//context.translate(-x2,-y2);
// Поворот фигуры
context.rotate(Math.PI/q1);
context.rotate(Math.PI/q2);
// Рисование квадрата
context.fillStyle="#ff0000";
context.fillRect(-rectWidth/2,-rectHeight/2,rectWidth,rectHeight);
// Вставка символа
context.font="30pt Calibri";
context.textAlign="center";
context.fillStyle="#0000ff";
context.fillText("Ю",0,15); }, 200);
|
Цитата:
|
Попробовал сделать цикл. Чтобы значение угла поворота квадрата не повторялось подряд. В чем я ошибся?
a=0;
// Первое объявление переменных для проверки неповторения значения q
var q=0;
var qold=0;
b=setInterval (function() {
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
// Размеры квадрата.
var rectWidth = 40;
var rectHeight = 40;
// Сохранение
context.save();
// Очистка холста
context.clearRect(0, 0, canvas.width, canvas.height);
// Смещение начала осей координат в центр фигуры
context.translate(canvas.width/2+Math.round((Math.random()*100)-50),canvas.height/2+Math.round((Math.random()*100)-50));
// Алгоритм поворота квадрата с проверкой неповторения значения q
// Расчет угла поворота по часовой стрелке
if (q==qold) {
q = Math.floor((Math.random()*10)/3)*0.5;}
// Поворот
context.rotate(Math.PI*q);
qold=q;
// Рисование квадрата
context.fillStyle="#ff0000";
context.fillRect(0,0,rectWidth,rectHeight);
// Вставка символа
context.font="30pt Calibri";
context.textAlign="center";
context.fillStyle="#0000ff";
context.fillText("W",20,33);
a++;
if(a==50){clearInterval(b)};
// Восстановление
context.restore();
}, 1000);
|
Zemsky,
Вариант... Цитата:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas> <script>
var a = 0;
// Первое объявление переменных для проверки неповторения значения q
var q = 0;
var qold = 0;
var b = setInterval(function () {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// Размеры квадрата.
var rectWidth = 40;
var rectHeight = 40;
// Сохранение
context.save();
// Очистка холста
context.clearRect(0, 0, canvas.width, canvas.height);
// Смещение начала осей координат в центр фигуры
context.translate(canvas.width / 2 + Math.round((Math.random() * 100) - 50), canvas.height / 2 + Math.round((Math.random() * 100) - 50));
// Алгоритм поворота квадрата с проверкой неповторения значения q
// Расчет угла поворота по часовой стрелке
do {
q = Math.floor((Math.random() * 10) / 3) * 0.5
} while (q == qold)
// Поворот
context.rotate(Math.PI * q);
qold = q;
// Рисование квадрата
context.fillStyle = "#ff0000";
context.fillRect(0, 0, rectWidth, rectHeight);
// Вставка символа
context.font = "30pt Calibri";
context.textAlign = "center";
context.fillStyle = "#0000ff";
context.fillText("\u2603", 20, 33);
a++;
if (a == 50) {
clearInterval(b)
};
// Восстановление
context.restore();
}, 1000);
</script>
</body>
</html>
|
Правильно ли я понял, что надо было применить другой цикл? Сейчас еще раз осмыслю. Спасибо! Продолжаю изучать. :)
|
для вашего варианта сколько раз прежнее значение может повторится за 50 шагов
for (var i = 0, k = 0, q = 0, qold; i < 50; i++) {
if (q == qold) {
q = Math.floor((Math.random() * 10) / 3) * 0.5;
};
if (q == qold) k++;
qold = q;
}
alert('50 -> ' + k)
|
Спасибо! Можно попробовать организовать алгоритм так, чтобы за N шагов каждое положение из 4-х повторялось N/4 раз. Сейчас я, правда, попытаюсь привязать клавиши Стрелки клавиатуры к повороту квадрата. Почти игра получается. Если правильно ответил как повернут квадрат, очко плюс, если неправильно, минус. Все интереснее...
|
Цитата:
|
|
Цитата:
|
Цитата:
|
:write:
генератор цепочек неповторяющий подряд и равномерного распределения для любого количества элементов >=3.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<script>
function rund(e) {
function d(b) {
for (var a = b.length - 1; 0 < a; a--) {
var c = Math.floor(Math.random() * (a + 1)),
d = b[c];
b[c] = b[a];
b[a] = d
}
return b
}
var a = [],
c = [];
for (i = 0; i < e;) a[i] = ++i;
d(a);
return function () {
var b = a.shift();
c.push(b);
1 == a.length && (d(c), a = a.concat(c), c = []);
return b
}
};
var N = 40000,
a = [],
e = 4,
z = rund(e),
i;
for (i = 0; i < e + 1; i++) {
a[i] = 0;
}
for (i = 0; i < N; i++) {
a[z()]++;
}
alert(a); //проверка равномерности ноль неучитывается
for (i = 0; i < 40; i++) {
document.write(z()+' '); //для примера
}
</script>
</body>
</html>
|
рони,
Вы это сходу написали? Да... :) Мне есть куда стремиться. |
Zemsky,
:victory: :dance: дорогу осилит идущий |
Ищущий да обрящет..:write:
Со стрелками через case разбираться? |
Цитата:
|
Zemsky, на всякий случай
http://learn.javascript.ru/keyboard-events |
рони,
Вот спасибо! Буду разбираться.. |
Zemsky,
вариант управления стрелками ... кликнуть по квадрату вначале
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div{height:100px;width:100px;background:#006400;position:relative}
</style>
<script>
window.onload = function () {
var b = {
39: ["left", 5],
37: ["left", -5],
40: ["top", 5],
38: ["top", -5],
left: 0,
top: 0
};
document.body.onkeydown = function (a) {
a = a || window.event;
a = a.keyCode;
var d = document.getElementById("show");
if (a in b) {
var c = b[a][0];
b[c] += b[a][1];
d.style[c] = b[c] + "px"
}
return false
}
};
</script>
</head>
<body>
<div id="show" ></div>
</body>
</html>
|
рони,
Кладу в архив. Это ассоциативный массив? Вот со второй частью полная непонятка... |
Цитата:
|
Цитата:
Я еще только начал осваивать. Поэтому и задачу несложную себе формулирую. И постепенно усложняю. |
рони,
Красиво, только зачем так сокращать, всё таки не в разработку отдаёте, а объясняете человеку :) А то получается полу обфусцированный код :) |
Zemsky,
a = a || window.event; Это для кроссбраузерности. В итоге в а будет событие. (event) a = a.keyCode; Перезаписали в а код нажатой клавиши, которую взяли из события if (a in b) { проверяем есть ли в объекте b ключ a var c = b[a][0]; объявляем переменную c равную первому элементу массива в объекте b c ключём a b[c] += b[a][1]; изменяем left или top в b в зависимости от клавиши d.style[c] = b[c] + "px" смещаем квадрат |
tsigel,
почему Цитата:
научусь имена давать вразумительные - будет несокращённый вариант. и спасибо что обьяснили мой код |
рони,
Ну как же! Ещё можно удалить переносы на новую строку и пробелы Цитата:
:) |
tsigel, рони,
Искренняя благодарность! Сейчас, правда, внучку привезли. Так что ей все внимание. А к изучению вернемся завтра.. |
| Часовой пояс GMT +3, время: 22:31. |