Javascript 在触摸设备的HTML5中使用touchmove在画布内拖动或移动图像_Javascript_Android_Jquery_Html_Cross Platform

Javascript 在触摸设备的HTML5中使用touchmove在画布内拖动或移动图像

javascript android jquery html

Javascript 在触摸设备的HTML5中使用touchmove在画布内拖动或移动图像,javascript,android,jquery,html,cross-platform,Javascript,Android,Jquery,Html,Cross Platform,我正在创建一个HTML5游戏，它也可以在Android上运行。我看了几篇文章，还没有找到答案。我有一个通过javascript生成的图像，我想使用touchmove移动这个图像，这样我就可以在我的Android设备上运行它。代码如下： gameCanvas.addEventListener("touchmove", touchXY, true); function touchXY(e) { if (!e) var e = event;

我正在创建一个HTML5游戏，它也可以在Android上运行。我看了几篇文章，还没有找到答案。我有一个通过javascript生成的图像，我想使用touchmove移动这个图像，这样我就可以在我的Android设备上运行它。代码如下：

    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;

    }

这是行不通的。我从你那里得到这个密码

这是我的画布：

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

我只想将图像移到画布中。

我写了一个完整的示例，希望不会太冗长

<!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>

<!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>

//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);
}