|
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)
|
| Часовой пояс GMT +3, время: 17:39. |
|