在HTML5中使用touchmove拖動或移動圖像在觸摸設備中使用touchmove

我正在創建一個可以在Android上運行的HTML5遊戲。我經歷了幾篇文章，但沒有得到解決方案。我有一個圖像，我通過javascript生成，我想要使用touchmove移動此圖像，以便我可以在我的android設備上運行它。請幫忙。這是代碼：在HTML5中使用touchmove拖動或移動圖像在觸摸設備中使用touchmove

gameCanvas.addEventListener("touchmove", touchXY, true); 
function touchXY(e) { 
     if (!e) 
      var e = event; 
     e.preventDefault(); 
     avatarX = e.targetTouches[0].pageX - gameCanvas.offsetLeft; 
     avatarY = e.targetTouches[0].pageY - gameCanvas.offsetTop; 

    }

這是行不通的。我從https://developer.apple.com/library/safari/documentation/audiovideo/conceptual/html-canvas-guide/addingmouseandtouchcontrolstocanvas/addingmouseandtouchcontrolstocanvas.html

此代碼，這是我的畫布：

<canvas id="gameCanvas" onclick="setUpGame();" width="400" height="300"></canvas>

這是我的形象：

avatarImage.src = "img/avatar.png"; 

gameCanvas.getContext("2d").drawImage(avatarImage, Math.random() * 100, Math.random() * 100);

我只是想移動圖像的畫布內。我是初學者。請幫忙。謝謝

來源

2014-03-31 user3479561

我寫了一個完整的例子，希望它不是太冗長。

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset='UTF-8'> 
    </head> 
    <body> 
    <canvas id='canvas' width='512' height='512'></canvas> 
    <script> 
     var c=document.getElementById('canvas'), 
      ctx=c.getContext('2d'), 
      activeBox='none', 
      //populate the map with objects 
      box=[ 
      { 
       x:256, 
       y:128, 
       width:32, 
       height:64 
      }, 
      { 
       x:128, 
       y:64, 
       width:64, 
       height:64 
      }, 
      { 
       x:32, 
       y:32, 
       width:32, 
       height:32 
      }, 
      ]; 

     function draw(){ 
     //clear the screen, draw population 
     ctx.clearRect(0,0,c.width,c.height); 
     for(var i=0;i<box.length;i++){ 
      ctx.fillRect(box[i].x,box[i].y,box[i].width,box[i].height); 
     } 
     //repeat at 60fps if possible, pause if window looses focus 
     requestAnimationFrame(draw); 
     } 

     function startTouch(e){ 
     //this makes it easier to write control flow later and keeps XY relative to canvas 
     var xTouch=e.touches[0].pageX-c.offsetLeft, 
      yTouch=e.touches[0].pageY-c.offsetTop; 

     //its best to go through this loop in touchstart, because it only happens once per touch 
     for(var i=0;i<box.length;i++){ 
      if(xTouch>box[i].x&&xTouch<box[i].x+box[i].width){ 
      if(yTouch>box[i].y&&yTouch<box[i].y+box[i].height){ 
       activeBox=i; 
      } 
      } 
     } 
     } 

     function moveTouch(e){ 
     //grab a box by the center 
     if(activeBox!='none'){ 
      box[activeBox].x=e.changedTouches[0].pageX-box[activeBox].width/2; 
      box[activeBox].y=e.changedTouches[0].pageY-box[activeBox].height/2; 
     } 
     } 

     function endTouch(){ 
     //clear active so that dragging empty space wont move the last active box 
     activeBox='none'; 
     } 

     canvas.addEventListener('touchstart',startTouch); 
     canvas.addEventListener('touchmove',moveTouch); 
     canvas.addEventListener('touchend',endTouch); 
     window.addEventListener('load',draw); 
    </script> 
    </body> 
</html>

我用fillRect爲了簡單，但如果你想用的drawImage來替代它，你就需要爲每個新的元素和源屬性添加到框對象數組。這是一個部分例子。

//you need a new one of these for every image 
var img=new Image(); 
    img.src='http://www.w3schools.com/images/w3logotest2.png'; 
var box={ 
     source:img, 
     x:Math.floor((Math.random()*256)+1), 
     y:Math.floor((Math.random()*256)+1) 
    }; 
//make sure the image doesnt load before the script 
window.onload=function(){ 
    ctx.drawImage(img,box.x,box.y); 
}

來源

2014-03-31 03:42:30

在HTML5中使用touchmove拖動或移動圖像在觸摸設備中使用touchmove

回答

相關問題