Canvas Game Development Learning Part 8: Basic Animation

Since we use scripts to control the canvas object, it is quite easy to implement some interactive animations. However, canvas has never been designed specifically for animation (unlike Flash), so it will inevitably have some limitations. Probably the biggest limitation is that once an image is drawn, it stays that way. If we needed to move it, we'd have to redraw everything (including the previous ones). Redrawing is quite time consuming, and performance depends heavily on the speed of your computer.

Basic animation steps Basic animation steps

To draw a frame, you need the following steps:

Clear the canvas except for the content to be drawn next Will completely fill the canvas (such as the background image), otherwise you need to clear everything. The simplest way is to use the clearRect method. If you want to change some settings that will change the state of the canvas (style, deformation, etc.), and you want it to be in the original state every time you draw a frame, you need to save it first.

Drawing animated shapes
This step is to redraw the animation frame.
Restore canvas state If the canvas state has been saved, you can restore it first and then redraw the next frame.

Controlling an animation. Drawing content on canvas uses the methods provided by canvas or customized. Usually, we can only see the results after the script execution ends, for example, It is impossible to complete animation inside a for loop. We need some way to schedule redraws. There are two ways to achieve such animation manipulation. First, you can use the setInterval and setTimeout methods to control redrawing at a set time point.

setInterval(animateShape,500);  
  setTimeout(animateShape,500);

Animation example 1

In this example, I will make a small solar system simulation system move.

var sun = new Image();  
 var moon = new Image();  
 var earth = new Image();  
 function init(){  
   sun.src = 'images/sun.png';  
   moon.src = 'images/moon.png';  
   earth.src = 'images/earth.png';  
   setInterval(draw,100);  
 }  
   
 function draw() {  
   var ctx = document.getElementById('canvas').getContext('2d');  
   
   ctx.globalCompositeOperation = 'destination-over';  
   ctx.clearRect(0,0,300,300); // clear canvas  
   
   ctx.fillStyle = 'rgba(0,0,0,0.4)';  
   ctx.strokeStyle = 'rgba(0,153,255,0.4)';  
   ctx.save();  
   ctx.translate(150,150);  
   
   // Earth  
   var time = new Date();  
   ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );  
   ctx.translate(105,0);  
   ctx.fillRect(0,-12,50,24); // Shadow  
   ctx.drawImage(earth,-12,-12);  
   
   // Moon  
   ctx.save();  
   ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );  
   ctx.translate(0,28.5);  
   ctx.drawImage(moon,-3.5,-3.5);  
   ctx.restore();  
   
   ctx.restore();  
     
   ctx.beginPath();  
   ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit  
   ctx.stroke();  
    
   ctx.drawImage(sun,0,0,300,300); 
}

Animation Example 2

function init(){  
      clock();  
      setInterval(clock,1000);  
    }  
    function clock(){  
      var now = new Date();  
      var ctx = document.getElementById('canvas').getContext('2d');  
      ctx.save();  
      ctx.clearRect(0,0,150,150);  
      ctx.translate(75,75);  
      ctx.scale(0.4,0.4);  
      ctx.rotate(-Math.PI/2);  
      ctx.strokeStyle = "black";  
      ctx.fillStyle = "white";  
      ctx.lineWidth = 8;  
      ctx.lineCap = "round";  
     
      // Hour marks  
      ctx.save();  
      for (var i=0;i<12;i++){  
        ctx.beginPath();  
        ctx.rotate(Math.PI/6);  
        ctx.moveTo(100,0);  
        ctx.lineTo(120,0);  
        ctx.stroke();  
      }  
      ctx.restore();  
     
      // Minute marks  
      ctx.save();  
      ctx.lineWidth = 5;  
      for (i=0;i<60;i++){  
        if (i%5!=0) {  
          ctx.beginPath();  
          ctx.moveTo(117,0);  
          ctx.lineTo(120,0);  
          ctx.stroke();  
        }  
        ctx.rotate(Math.PI/30);  
      }  
      ctx.restore();  
        
      var sec = now.getSeconds();  
      var min = now.getMinutes();  
      var hr  = now.getHours();  
      hr = hr>=12 ? hr-12 : hr;  
     
      ctx.fillStyle = "black";  
     
      // write Hours  
      ctx.save();  
      ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )  
      ctx.lineWidth = 14;  
      ctx.beginPath();  
      ctx.moveTo(-20,0);  
      ctx.lineTo(80,0);  
      ctx.stroke();  
      ctx.restore();  
     
      // write Minutes  
      ctx.save();  
      ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )  
      ctx.lineWidth = 10;  
      ctx.beginPath();  
      ctx.moveTo(-28,0);  
      ctx.lineTo(112,0);  
      ctx.stroke();  
      ctx.restore();  
       
      // Write seconds  
      ctx.save();  
      ctx.rotate(sec * Math.PI/30);  
      ctx.strokeStyle = "#D40000";  
      ctx.fillStyle = "#D40000";  
      ctx.lineWidth = 6;  
      ctx.beginPath();  
      ctx.moveTo(-30,0);  
      ctx.lineTo(83,0);  
      ctx.stroke();  
      ctx.beginPath();  
      ctx.arc(0,0,10,0,Math.PI*2,true);  
      ctx.fill();  
      ctx.beginPath();  
      ctx.arc(95,0,10,0,Math.PI*2,true);  
      ctx.stroke();  
      ctx.fillStyle = "#555";  
      ctx.arc(0,0,3,0,Math.PI*2,true);  
      ctx.fill();  
      ctx.restore();  
     
      ctx.beginPath();  
      ctx.lineWidth = 14;  
      ctx.strokeStyle = &#39;#325FA2&#39;;  
      ctx.arc(0,0,142,0,Math.PI*2,true);  
      ctx.stroke();  
     
      ctx.restore();  
    }

The above is the canvas Game Development Learning Part 8: Basic animation content. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!