Her bir içeriği JavaScript ile döndürme

Question

image = new Image(); 
image.src = 'assets/img/image.png'; 
for (var i = 0; i < this.bombs.length; i++) { 
    var bomb = this.bombs[i]; 
    ctx.drawImage(image, bomb.x - 2, bomb.y - 2, 15, 8); 

} 

Bu, benim tuval oyunumdaki bir görüntüdür ve üstten düşer. Ama istiyorum, görüntüleri her eyalette rastgele döndür.

denedim bu:

function drawRotated(degrees){ 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
    ctx.save(); 
    ctx.translate(canvas.width/2,canvas.height/2); 
    ctx.rotate(degrees*Math.PI/180); 
    ctx.drawImage(image,-image.width/2,-image.width/2); 
    ctx.restore(); 
} 

Eklendi benim görüntünün ama onun çalışmıyor bu fonksiyonu. Nasıl yapabilirim?

Answer 1

Doğru yoldasınız!

bir (veya daha fazla) resmin döndürmek için:

1. sen merkezli görüntüyü istediğiniz merkez noktasına çevirin. İstenen açıda
2. tarafından
3. döndürün (& döndürmek çevirmek geri)
4. dönüşümler geri alma görüntüyü çizin.

değişikliklerin bir çift: tuval ortasına

• Hep translate. Bombanın düşmesini istiyorsanız, tuvali giderek aşağı doğru çevirmelisiniz.

• Bir yazım hatası: drawImage'da, & yükseklik bağımsızlığı için width kullandınız.Bir verimlilik: context.save and context.restore daha pahalı işlemlerdir çünkü bunlar tüm tuval stillerini & geri yükler.

  var canvas=document.getElementById("canvas"); 
   
  var ctx=canvas.getContext("2d"); 
   
  var cw=canvas.width; 
   
  var ch=canvas.height; 
   
  
   
  var bomb; 
   
  
   
  var img=new Image(); 
   
  img.onload=start; 
   
  img.src="https://dl.dropboxusercontent.com/u/139992952/multple/danger.png"; 
   
  function start(){ 
   
      var aa=img.width*img.width; 
   
      var bb=img.height*img.height; 
   
      var cc=Math.sqrt(aa+bb); 
   
      bomb={ 
   
       x:150,y:-img.height/2, 
   
       degrees:0,image:img, 
   
       maxRotatedHalfHeight:cc/2 
   
      }; 
   
      requestAnimationFrame(animate); 
   
  } 
   
  
   
  function drawRotated(b){ 
   
      ctx.clearRect(0,0,canvas.width,canvas.height); 
   
      ctx.save(); 
   
      ctx.translate(b.x,b.y); 
   
      ctx.rotate(b.degrees*Math.PI/180); 
   
      ctx.drawImage(b.image,-b.image.width/2,-b.image.height/2); 
   
      ctx.restore(); 
   
  } 
   
  
   
  function animate(time){ 
   
      drawRotated(bomb); 
   
      bomb.y+=1; 
   
      bomb.degrees+=1; 
   
      if(bomb.y<=canvas.height+bomb.maxRotatedHalfHeight){ 
   
       requestAnimationFrame(animate); 
   
      }else{ 
   
        alert('Animation is complete.'); 
   
      } 
   
  }

  body{ background-color: ivory; } 
   
  #canvas{border:1px solid red; margin:0 auto; }

  <canvas id="canvas" width=300 height=175></canvas>

  : Bunun yerine, İşte context.setTransform(1,0,0,1,0,0)

var bu değişikliklerin için tekrar elden kodunuzu ile (tercüme döndürmek) yalnızca dönüşümleri sıfırlamak için daha verimli