Для вращения картинки через css3 необходимо создавать отдельные дивы! а если картинок и интерактивных объектов около 1000 для каждого делать?!
|
Да и тогда по вашему методу проще создать n-ое количество холстов.. и спокойно вращать каждый элемент в отдельности.. но опять же! а если их будет около 1000!! ..
|
полотно рисуется. затем вращение на необход угол .отрисовка картинки. вращение полотна назад -то есть вращение полотна на тотже угол что и было повёрнуто но со знаком минус.
|
Я и пытаюсь это сделать! но ничего не получаеться!
Вот код набросал (только что): <!DOCTYPE> <html> <head></head> <body> <canvas id="ci" width="720" height="404"></canvas> <script> function CanvasCenter(){ var i = new Image(); var i2 = new Image(); i.onload = function(){ var dl = i.width; var c = document.getElementById("ci"); var context = c.getContext("2d"); var context2 = c.getContext("2d"); var beta = -0.02; //угол поворота, если минус то против часовой setTimeout(function(){ context.save(); context.clearRect(0,0,dl,dl); context.drawImage(i2, 0, 0); context.restore(); context2.transform(Math.cos(beta), Math.sin(beta), -Math.sin(beta), Math.cos(beta), 0, 0); context2.drawImage(i, 0, 0, dl, dl); setTimeout(arguments.callee,10); },0); } i.src = "book.png"; i2.src = "test_screen.png"; } CanvasCenter(); </script> </body></html> |
Если начинаю возвращать полотно обратно картинка становиться стационарной!
|
Вот еще код!
Тут вообще ниче не крутиться! <!DOCTYPE> <html> <head></head> <body> <canvas id="ci" width="720" height="404"></canvas> <script> function CanvasCenter(){ var i = new Image(); var i2 = new Image(); i.onload = function(){ var dl = i.width; var c = document.getElementById("ci"); var context = c.getContext("2d"); var context2 = c.getContext("2d"); var beta = -0.02; //угол поворота, если минус то против часовой setTimeout(function(){ context.restore(); context.save(); context2.save(); context.clearRect(0,0,dl,dl); context.drawImage(i2, 0, 0); context2.restore(); context2.transform(Math.cos(beta), Math.sin(beta), -Math.sin(beta), Math.cos(beta), 0, 0); context2.drawImage(i, 0, 0, dl, dl); setTimeout(arguments.callee,10); },0); } i.src = "book.png"; i2.src = "test_screen.png"; } CanvasCenter(); </script> </body></html> |
и не будет. угол поворота в канве относительный а не абсолютный.
для анимации вращения чегото на фоне чегото угол нужно менять . тоесть поворот на 1 градус-возврат на 1 градус,поворот на 2 градуса-возврат на два градуса,поворот на 3 -возврат на 3. и так пока не дойдёшь до необходимого угла и у канвы нужно для нормальной работы явно задавать и размеры и разрешение |
Вот например! И опять ничего! Все задано
.. setTimeout(function(){ { сontext.rotate(-0.01); сontext.drawImage (i, 0, 0,720,404); сontext.rotate(0.01); сontext.drawImage(i2, 0, 0, 125, 152); } .. |
т.е. она опять стационарна!
Повернулась.. отрисовала! Вернула все обратно! .. что-то типо этого! |
var angl=0.01;
setTimeout(function(){
{
сontext.drawImage (i, 0, 0,720,404);|// рисуем фон
сontext.rotate(-angl);
сontext.drawImage(i2, 0, 0, 125, 152);// рисуем чегото на фоне
сontext.rotate(angl);
angl=angl+0.01;
}
както так |
| Часовой пояс GMT +3, время: 09:43. |