Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

JavaScript Code to Make Image Wave Like a Flag

This example shows you how to make an image of a flag appear to wave in the wind. Of course the first thing you need is an image of a flag. This example is designed to display images that are around 300 pixels wide. That's because the image will be displayed in an HTML5 canvas element, the code for which is shown below.

<canvas id="mycanvas" width="400" height="400"></canvas>

Of course you could edit the canvas element and the code to display any size flag that you wish. You would place this canvas element in the body section of your webpage where you want the flag animation to appear. Then you would paste the JavaScript code block shown below into the head section of your webpage.

<script type="text/javascript">
var pattern = new Image();
pattern.src = "united_kingdom.png";
var ph = pattern.height;
    
function animate()
{
   setInterval(drawShape, 500);
}
         
function drawShape()
{
   var canvas = document.getElementById('mycanvas');
   var ctx = canvas.getContext('2d');
   var iw = pattern.width;
   var ih = pattern.height;
   ctx.clearRect(0, 0, 400, 400);

   if(ph <= 0)
   {
      ph = ih;
   }
   else
   {
      ph -= 20;
   }

   for(var x = 0; x < iw; x++)
   {
      // 8 = height of wave, 20 = frequency, 38 = vertical offset
      var y = 8 * Math.sin((x + ph)/20) + 38;
      ctx.drawImage(pattern, x, 0, 1, ih, x, y, 1, ih);
   }
}
</script>

The first thing you need to do in this code is enter a link to your flag image, in quotes, where it says pattern.src =. If the image is in the same directory as your webpage, this would simply be the file name of your image.

The code works by setting up an interval timer that calls the drawShape function every 500 milliseconds. Of course you can edit the time interval to make the flag wave at any speed that you wish. The drawShape function first clears the previous image from the canvas, then it calculates a phase value for this particular image draw. It then runs through the pixel width of the image, setting the height of each pixel row using the Math.sin function.

In the line var y = 8 * Math.sin((x + ph)/20) + 38;, 8 sets the height of the wave, 20 sets the frequency of the wave, and 38 sets the vertical offset of the flag image within the canvas element. passing a different phase value to the horizontal pixel locations in the loop is what makes the flag wave.

The last thing you must do is call the animate function by placing the code shown below in the webpage's body tag.

<body onload="animate();">

That's all there is to it, now you can easily have your favorite flag waving on your webapge.

More Java Script Code:
• Code for Java Script Circle/Sphere Calculator
• How to Shuffle the Deck With Java Script
• Easy Java Script Code for Sideways Slide show
• Disable IE8 Accelerators on Your Website
• Code to Add Music to Your Webpage
• Code to Fade Between Two different Pictures
• Using a Select List for Navigation
• Let Your Web site Visitors Set Font Size
• Easy JavaScript Form Design
• Easy Code for Animated Banner - Squeeze Text

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2017 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268