Use Canvas to develop games using JavaScript and Canvas

Last Update:2013-12-17 Source: Internet

Author: User

Tags translate function

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

3. Advanced Image operations through the Canvas Element

Http://www.brighthub.com/internet/web-development/articles/39509.aspx

This article will teach you how to use JavaScript and Canvas elements to operate images in several different ways. These methods are impossible before the appearance of the Canvas element.

The previous article demonstrated how to use Canvas to implement a basic image animation. The example is very simple. The same effect can be easily implemented by modifying some attributes of standard HTML elements such as IMG or DIV. Next we will demonstrate the advanced application of the Canvas Element and Its real power.

First, prepare an HTML page.

 
 
  
   
  
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">  
  
    
       
         <title>JavaScript Platformer 2</title>  
  
         <script type="text/javascript" src="jsplatformer2.js"></script>  
  
         <style type="text/css">  
  
            body { font-family: Arial,Helvetica,sans-serif;}  
  
         </style>  
  
       
     <body>  
  
        <p>  
  
           <a href="http://www.brighthub.com/internet/web-development/articles/38364.aspx">  
  
              Game Development with Javascript and the canvas element  
  
           </a>  
  
        </p>  
  
        <canvas id="canvas" width="600" height="400">  
  
           <p>Your browser does not support the canvas element.</p>  
  
        </canvas>  
  
        <br />  
  
        <button onclick="currentFunction=alpha;">Change Alpha</button>  
  
        <button onclick="currentFunction=shear;">Shear</button>  
  
        <button onclick="currentFunction=scale;">Scale</button>  
  
        <button onclick="currentFunction=rotate;">Rotate</button>  
  
     </body>

Compared with the HTML page in the previous example, the only difference is that some buttons are added. Click these buttons to set the value of the currentFunction variable (described later) to change the function running in the rendering loop.

The following is the jsplatformer2.js code.

 
 
  
   
  
  // The number of frames per second
  
  Const FPS = 30;
  
  Const SECONDSBETWEENFRAMES = 1/FPS;
  
  Const HALFIMAGEDIMENSION = 75;
  
  Const HALFCANVASWIDTH = 300;
  
  Const HALFCANVASHEIGHT = 200;
  
  Var image = new Image ();
  
  Image. src = "jsplatformer2-smiley.jpg"; // still the image in the first example
  
  Var canvas = null;
  
  Var context2D = null;
  
  Var currentFunction = null;
  
  Var currentTime = 0;
  
  Var sineWave = 0;
  
   
  
  Window. onload = init;
  
   
  
  Function init ()
  
  {
  
  Canvas = document. getElementById ('canvas ');
  
  Context2D = canvas. getContext ('2d ');
  
  SetInterval (draw, SECONDSBETWEENFRAMES * 1000 );
  
  CurrentFunction = scale;
  
  }
  
   
  
  Function draw ()
  
  {
  
  CurrentTime + = SECONDSBETWEENFRAMES;
  
  SineWave = (Math. sin (currentTime) + 1)/2;
  
   
  
  Context2D. clearRect (0, 0, canvas. width, canvas. height );
  
   
  
  Context2D. save ();
  
   
  
  Context2D. translate (HALFCANVASWIDTH-HALFIMAGEDIMENSION, HALFCANVASHEIGHT-HALFIMAGEDIMENSION );
  
   
  
  CurrentFunction ();
  
   
  
  Context2D. drawImage (image, 0, 0 );
  
   
  
  Context2D. restore ();
  
  }
  
   
  
  Function alpha ()
  
  {
  
  Context2D. globalAlpha = sineWave;
  
  }
  
   
  
  Function shear ()
  
  {
  
  Context2D. transform (1, 0, (sineWave-0.5), 1, 0, 0 );
  
  }
  
   
  
  Function scale ()
  
  {
  
  Context2D. translate (HALFIMAGEDIMENSION * (1-sineWave), HALFIMAGEDIMENSION * (1-sineWave ));
  
  Context2D. scale (sineWave, sineWave );
  
  }
  
   
  
  Function rotate ()
  
  {
  
  Context2D. translate (HALFIMAGEDIMENSION, HALFIMAGEDIMENSION );
  
  Context2D. rotate (sineWave * Math. PI * 2 );
  
  Context2D. translate (-HALFIMAGEDIMENSION,-HALFIMAGEDIMENSION );
  
  }

As before, this JavaScript file first defines some global variables.

◆ FPS: the number of frames per second

◆ SECONDSBETWEENFRAMES: the number of seconds between two frames (the reciprocal of FPS)

◆ HALFIMAGEDIMENSION: half the width/height of the image to be drawn, which is used to locate the image to the center of the canvas

◆ HALFCANVASWIDTH: half the width of the canvas. It is used in combination with HALFIMAGEDIMENSION to center the image on the canvas.

◆ HALFCANVASHEIGHT: half of the canvas height, used in combination with HALFIMAGEDIMENSION to center images on the canvas

◆ CurrentFunction: The function running in the rendering loop (see the previous article ).

◆ CurrentTime: How many seconds has the application been running

◆ SineWave: A value between 0 and 1, used to control Image Motion

◆ Image: image to be drawn on the canvas

◆ Canvas: canvas Element reference

◆ Context2D: reference of the 2D context of the Canvas Element

Then, as before, you need to call the init function immediately when the onload event of the window occurs (for more information about the init function, see the previous article ).

Draw Function

Let's take a look at the draw function:

 
 
  
   
  
  function draw()  
  
  {  
  
      currentTime += SECONDSBETWEENFRAMES;  
  
      sineWave = (Math.sin(currentTime) + 1) / 2;  
  
   
  
      context2D.clearRect(0, 0, canvas.width, canvas.height);  
  
   
  
      context2D.save();  
  
      context2D.translate(HALFCANVASWIDTH - HALFIMAGEDIMENSION, HALFCANVASHEIGHT - HALFIMAGEDIMENSION);  
  
      currentFunction();  
  
      context2D.drawImage(image, 0, 0);  
  
      context2D.restore();  
  
  }

This example demonstrates four effects: modifying the alpha value (transparency) and scaling, rotating, and shear images. To demonstrate these effects, you need to apply changes based on values within a certain range. The variable sineWave is used to define the reference of this range value.

The standard sine function can generate a perfect waveform between-1 and 1. First, we increase the currentTime variable to reflect how long the animation has been running, and then use this value to find a point on the sine curve. Add 1 to the values returned by the sine function (from-1 to 1) and divide them by 2 to convert them into values in the range of 0 to 1.

 
 
  
  currentTime += SECONDSBETWEENFRAMES;  
  
  sineWave = (Math.sin(currentTime) + 1) / 2;

Call the clearRect method to clear the canvas to prepare a clean layout for the subsequent drawing.

 
 
  
  context2D.clearRect(0, 0, canvas.width, canvas.height);

The effects applied to the canvas can be accumulated, so you can use a few simple functions to "combine" the effects. For example, a ship may need to be rotated, transformed, or scaled before being drawn to the screen. Because all effects work on the canvas, these effects apply to all objects that will be drawn on the screen, not just an image or a shape (such as a ship ).

Among them, the save and restore functions provide a simple mechanism for applying these cumulative effects to draw images or images that apply these effects to the canvas, then, "undo" these changes. What are background operations? The save Function pushes the current drawing status to the stack, while the restore function pushes the last status to the stack. Taking the spacecraft mentioned above as an example, you need to perform the following operations:

◆ Call the save Function to save the current drawing status)

◆ Rotating, transforming, and scaling the context

◆ Drawing a ship

Call the restore function to remove any effect added since the last time the save method was called, that is, to undo previous changes.

Here, we need to combine these two methods. First, save the painting status before applying any effects to the canvas.

 
 
  
  context2D.save();

After the rendering status is saved, the target effect of the application is displayed. Therefore, call the translate function to center the subsequent image on the canvas.

 
 
  
  context2D.translate(HALFCANVASWIDTH - HALFIMAGEDIMENSION, HALFCANVASHEIGHT - HALFIMAGEDIMENSION);

Next, call the function referenced by the variable currentFunction. These referenced functions are the key to making the image alpha (transparency) change, scaling, rotation, and shear. We will introduce these functions later.

 
 
  
  currentFunction();

After applying the effect to the image, you can draw it on the canvas. Therefore, the next step is to call drawImage for plotting.

 
 
  
  context2D.drawImage(image, 0, 0);

Finally, call the restore function to remove all effects applied since the save function is called from the canvas.

 
 
  
  context2D.restore();

Alpha Function

 
 
  
  function alpha()  
  
  {  
  
      context2D.globalAlpha = sineWave;  
  
  }

By modifying the globalAlpha attribute of the context object, the transparency of all subsequent painting operations will be modified. Setting globalAlpha to 0 means that any object to be drawn will be completely transparent. setting this attribute to 1 means that any painting operation will maintain the original transparency level. Here, we can modify the globalAlpha attribute to fade in and out smiling faces.

Shear Function

 
 
  
  function shear()  
  
  {  
  
      context2D.transform(1, 0, (sineWave - 0.5), 1, 0, 0);  
  
  }

The shear operation is implemented by applying a matrix to the canvas through the transform function. Transformation Matrix itself is a topic worth studying, but for us, if you don't want to understand the mathematical principles behind, you can find a lot of standard 2D transformation matrix (http://en.wikipedia.org/wiki/Transformation_matrix#Examples_in_2D_graphics) on the Internet ), directly use the transform function to apply them. The so-called shear is actually pushing the top or bottom of the image to one side.

Scale Function

 
 
  
  function scale()  
  
   {  
  
       context2D.translate(HALFIMAGEDIMENSION * (1 - sineWave), HALFIMAGEDIMENSION * (1 - sineWave));  
  
  56  
  
      context2D.scale(sineWave, sineWave);  
  
   }

As the name suggests, the scale function modifies the image size. But before that, we also called a transalte function. This is to center the scaled image on the canvas. If you comment out this line of code, you will find that the image expands from the upper left corner to the lower right corner. Call the translate function to offset the displacement of the center and keep the image centered.

Rotate Function

 
 
  
  function rotate()  
  
  {  
  
      context2D.translate(HALFIMAGEDIMENSION, HALFIMAGEDIMENSION);  
  
      context2D.rotate(sineWave * Math.PI * 2);  
  
      context2D.translate(-HALFIMAGEDIMENSION, -HALFIMAGEDIMENSION);  
  
  }

Similar to the scale function, the rotate function acts as its name: rotating an image. Similar to the scale function, the translate function is also called here to ensure that the image rotates around the center rather than the upper left corner. We recommend that you comment out the call to the translate function and check whether the results are different.

Just now we have seen four simple effects implemented by using Canvas elements. These effects are almost impossible to use standard HTML elements. Some effects can be implemented using built-in functions such as scale and rotate, while using the transform function can complete a large number of image operations (shear is only one of them ).

Let's take a look at the Demo. Http://webdemos.sourceforge.net/jsplatformer2/jsplatformer2.html

Author: Matthew Casperson Original article link: Game Development with JavaScript and the Canvas element

Li songfeng (http://www.cn-cuckoo.com/2011/08/10/game-development-with-javascript-and-the-canvas-element-2554.html)

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More