HTML5: изображение, вращающееся вокруг поворота, неправильная ориентация

Я хочу создать анимацию, которая нарисована на следующей диаграмме слева. Он должен визуализировать, т. Е. Облака, вращающиеся вокруг сферы.HTML5: изображение, вращающееся вокруг поворота, неправильная ориентация

Wrong rotation around a pivot

Я хочу облако А вращаться вокруг точки поворота X в некотором фиксированном радиусе (т.е. 100px). Конечно, для облака важно правильно ориентироваться, иначе это выглядело бы странно. Я достиг эффекта вращения вокруг стержня на фиксированном расстоянии, но моя реканта была неправильно ориентирована (см. Рисунок справа).

Код следующее:

<canvas id="cloudsCanvas" width="1050" height="300"></canvas> 
    <script> 
     var cloudCenter = [400, 400]; 

     // pivot point coordinates 
     var cx = 1050/2; 
     var cy = 800; 
     var deg = 45; 

     var cloud1 = new Image; 


     window.onload = function() { 
      var cloudsCanvas = document.getElementById("cloudsCanvas"); 
      var cloudsContext = cloudsCanvas.getContext("2d"); 

      setInterval(function() { 
       cloudsContext.save(); 
       cloudsContext.clearRect(0, 0, cloudsCanvas.width, cloudsCanvas.height); 

       deg += 1; 
       // Center the needle on the canvas. 
       cloudsContext.translate(cx, cy); 
       cloudsContext.rotate(deg * Math.PI/180); 
       cloudsContext.drawImage(cloud1, cloudCenter[0], cloudCenter[1]); 

       cloudsContext.restore(); 
      }, 50); 

     }; 

     cloud1.src = './img/cloud1.png'; 
</script>

Любые идеи, как это исправить? Спасибо!

источник

2013-12-17 Very Curious

вы не можете просто повернуть изображение на 90 градусов? – man

U означает исходное изображение cloud1.png? Ну, я могу, но я воспринимаю это как последний способ, поскольку, я думаю, это можно решить более элегантным способом, не так ли? –

хорошо, похоже, вы просто делаете работу самостоятельно, если можете просто повернуть изображение. – man

0 угол всегда указывает вправо, чтобы просто создать облако, которое предварительно поворачивается на 90 градусов по часовой стрелке (как если бы оно было обращено в этом месте) - он должен выглядеть следующим образом:

cloud

Возможно, вы можете предварительно повернуть, используя дополнительный холст, чтобы нарисовать невращающееся облако.

Modified fiddle here

Кроме того, необходимо сделать некоторые изменения в вашем коде:.

cloudCenter должно быть начальное положение справа от земного шара (то есть место, где было бы при 0 градусов)
перевести обратно после поворота

Как это:

cloudsContext.translate(cx, cy); 
cloudsContext.rotate(deg * Math.PI/180); 
cloudsContext.translate(-cx, -cy); 
cloudsContext.drawImage(cloud1, cloudCenter[0], cloudCenter[1]);

источник

2013-12-17 17:40:18 K3N

Как и другие респонденты, я также считаю, что более эффективно использовать редактор фотографий для предварительного поворота изображения на 90 градусов.

Но если вы хотите знать, как это сделать программно, вот пример и скрипка.

Демо: http://jsfiddle.net/m1erickson/YqBC2/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> 
<script src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
    $(function(){ 

     var canvas=document.getElementById("canvas"); 
     var ctx=canvas.getContext("2d"); 

     var angle=0; 
     var cx=150; 
     var cy=150; 
     var radius=50; 
     var img90; 

     var img=new Image() 
     img.onload=function(){ 
      canvas.width=img.height; 
      canvas.height=img.width; 
      ctx.save(); 
      ctx.translate(canvas.width/2,canvas.height/2); 
      ctx.rotate(Math.PI/2); 
      ctx.drawImage(img,-img.width/2,-img.height/2); 
      ctx.restore(); 
      img90=new Image(); 
      img90.onload=function(){ 
       canvas.width=300; 
       canvas.height=300; 
       animate(); 
      } 
      img90.src=canvas.toDataURL(); 
     } 
     img.crossOrigin="anonymous"; 
     img.src="https://dl.dropboxusercontent.com/u/139992952/cloud1.png"; 


     function draw(){ 
      ctx.clearRect(0,0,canvas.width,canvas.height); 
      ctx.beginPath(); 
      ctx.arc(cx,cy,radius,0,Math.PI*2); 
      ctx.closePath(); 
      ctx.fillStyle="orange"; 
      ctx.fill(); 
      ctx.stroke(); 

      ctx.save(); 
      ctx.translate(cx,cy); 
      ctx.rotate(angle); 
      ctx.drawImage(img90,radius+35-img.width/2,-img.height/2); 
      ctx.restore(); 

     } 

     function animate() { 
      requestAnimationFrame(animate); 

      // Drawing code goes here 
      angle+=Math.PI/360; 
      draw(); 
     } 


    }); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=350 height=350></canvas> 
</body> 
</html>

источник

2013-12-17 17:46:16 markE

HTML5: изображение, вращающееся вокруг поворота, неправильная ориентация

ответ

Смежные вопросы