HTML5 Game - Canvas Event Touch Events

  1. HOME
  2. HTML5 Game
  3. Canvas Event
  4. Touch events with ball movement

Introduction

Touch events are similar to mouse events.

A touch point is like a mouse cursor.

A finger will press, move, and release from the device.

There is no touch event equivalent to mouseover: there is either a touch or there isn't, there is no finger hovering.

The multiple touches can occur at the same time.

Each touch is stored in an array on the touch event.

Here's the touch events we use to interact with our animations:

  • touchstart
  • touchend
  • touchmove

Demo

ResultView the demo in separate window 

<!doctype html>  
    <html>  
     <head>  
      <meta charset="utf-8">  
      <title>Touch Events</title>  
    <style>#canvas {
  background-color: grey;
}</style>//  www.jav a2 s.  com
     </head>  
     <body>  
      <canvas id="canvas" width="400" height="400"></canvas>  
      <script>  
      window.onload = function () {  
        let canvas = document.getElementById('canvas');  

        function onTouchEvent (event) {  
          console.log(event.type);  
        }  

        canvas.addEventListener('touchstart', onTouchEvent, false);  
        canvas.addEventListener('touchend', onTouchEvent, false);  
        canvas.addEventListener('touchmove', onTouchEvent, false);  
      };  
      </script>  
     </body>  
    </html>

Related Topic