html5 canvas using sprite - Javascript Canvas

Javascript examples for Canvas:Example

  1. HOME
  2. Javascript
  3. Canvas
  4. Example

Description

html5 canvas using sprite

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <style id="compiled-css" type="text/css">

canvas {/*from w w  w.ja  va 2s. c o  m*/
   margin: 20px;
   border: 1px solid #000;
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
var y = 0,
    timer_y = 0,
    timer_pos = 0,
    canvas,
    context,
    imageHours;
function clearClock(context) {
    context.clearRect(0, 0, 300, 500);
}
function init() {
    canvas = document.getElementById("uhr");
    context = canvas.getContext("2d");
    imageHours = new Image();
    imageHours.src = "https://www.java2s.com/style/demo/Google-Chrome.png";
    context.drawImage(imageHours, 0, 0, 21, 30, 50, 50, 21, 30);
    var down = false;
    canvas.addEventListener('mousedown', function(event) {
        down = true;
        y = event.clientY;
    }, false);
    canvas.addEventListener('mouseup', function() {
        down = false;
        timer_pos = timer_y;
    }, false);
    canvas.addEventListener('mousemove', function(event) {
        if (down) {
            timer_y = ((y - event.clientY) * 0.5) + timer_pos;
            if (timer_y < 0) {
                timer_y = 0;
            } else if (timer_y > 120) {
                timer_y = 120;
            }
            // draw it
            clearClock(context);
            context.drawImage(imageHours, 0, timer_y, 21, 30, 50, 50, 21, 30);
        }
    }, false);
}
init();
    });

      </script> 
   </head> 
   <body> 
      <canvas id="uhr" height="500px" width="300px"></canvas>  
   </body>
</html>

Related Tutorials