ARTICLE

Building a Moving Image Using HTML5 Tools

Posted by Manish Singh Articles | HTML 5 January 04, 2012
This simple application developed in HTML 5 helps to show how to move an image in a browser. We know that HTML stands for Hyper Text Markup Language and it helps to display the data in a browser.
Reader Level:

Introduction

This simple application developed in HTML 5 helps to show how to move an image in a browser. We know that HTML stands for Hyper Text Markup Language and it helps to display the data in a browser. HTML 5 is the advanced version of HTML that can be used to develop 3D and animated application. This article is for beginners to help show how to display a moving image in a browser.

DOM

DOM is the acronum for Document Object Model. The DOM is a W3C (World Wide Web Consortium) standard. The DOM defines a standard for accessing documents like XML and HTML .The W3C Document Object Model (DOM) is a platform and language neutral interface that allows programs and scripts to dynamically access and update the content structure and style of a document.

The DOM is separated into 3 different parts / levels:

  • Core DOM - standard model for any structured document.
  • XML DOM - standard model for XML documents.
  • HTML DOM - standard model for HTML documents.

Canvas

Before any drawing we need to have a handle of a Canvas element to do manipulations and that handle is the context
object of the Canvas. The context of the <Canvas> element provides us all the API for methods to do drawing and manipulation in the Canvas.

Step 1 :
Open the HTML editor.

  • Click the start button -> notepad.
  • The name of the file is your choice.
  • Here I am using the name "Tom".

notepad.gif

Step 2 : Create a folder.

  • In any drive create a folder with the name of your choice.
  • Here we create a folder in D drive with the name "Tom".

folder.gif

Step 3 : Define the function removeColors under the function we define properties onmouseover, onmouseout.

Code

    function showGrayImg() {
        this.previousSibling.style.display = "inline";
        this.style.display = "none";
          }
    function removeColors() {
        var aImages = document.getElementsByClassName("grayscale"), nImgsLen = aImages.length, oCanvas = document.createElement("canvas"), oCtx =
        oCanvas.getContext("2d");
        for (var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0; nImgId < nImgsLen; nImgId++) {
            oColorImg = aImages[nImgId];
            nWidth = oColorImg.offsetWidth;
            nHeight = oColorImg.offsetHeight;
            oCanvas.width = nWidth;
            oCanvas.height = nHeight;
            oCtx.drawImage(oColorImg, 0, 0);
            oImgData = oCtx.getImageData(0, 0, nWidth, nHeight);
            aPix = oImgData.data;
            nPixLen = aPix.length;
            for (nPixel = 0; nPixel < nPixLen; nPixel += 4) {
                aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2])    / 3;
            }
            oCtx.putImageData(oImgData, 0, 0);
            oGrayImg = new Image();
            oGrayImg.src = oCanvas.toDataURL();
            oGrayImg.onmouseover = showColorImg;
            oColorImg.onmouseout = showGrayImg;
            oCtx.clearRect(0, 0, nWidth, nHeight);
            oColorImg.style.display = "none";
            oColorImg.parentNode.insertBefore(oGrayImg, oColorImg);
        }

Step 4: Set the style of the animated image.

Code

<style>
      html {
        height: 100%;
      }
      body {
        font-family: Arial, sans-serif;
        font-size: 83%;
        padding: 0;
        margin: 0;
        height: 100%;
      }
      a {
        color: black;
      }
      #content {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -260px;
        width: 520px;
        margin-top: -300px;
        height: 600px;
      }
      #doodle {
        width: 520px;
        height: 600px;
      }
      #doodle-temp {
        position: relative;
        left: 110px;
        top: 205px;
        width: 304px;
        height: 135px;
      }
      #prm {
        padding: 1em 0;
        width: 100%;
        text-align: center;
      }
    </style
>

Step 5: Write the complete code to remove a color image in the browser.

Code

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>MDC Example</title> 
<script type="text/javascript">
    function showColorImg() {
        this.style.display = "none";
        this.nextSibling.style.display = "inline";
    }
    function showGrayImg() {
        this.previousSibling.style.display = "inline";
        this.style.display = "none";
    }
    function removeColors() {
        var aImages = document.getElementsByClassName("grayscale"), nImgsLen = aImages.length, oCanvas = document.createElement("canvas"), oCtx =
        oCanvas.getContext("2d");
        for (var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0; nImgId < nImgsLen; nImgId++) {
            oColorImg = aImages[nImgId];
            nWidth = oColorImg.offsetWidth;
            nHeight = oColorImg.offsetHeight;
            oCanvas.width = nWidth;
            oCanvas.height = nHeight;
            oCtx.drawImage(oColorImg, 0, 0);
            oImgData = oCtx.getImageData(0, 0, nWidth, nHeight);
            aPix = oImgData.data;
            nPixLen = aPix.length;
            for (nPixel = 0; nPixel < nPixLen; nPixel += 4) {
                aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
            }
            oCtx.putImageData(oImgData, 0, 0);
            oGrayImg = new Image();
            oGrayImg.src = oCanvas.toDataURL();
            oGrayImg.onmouseover = showColorImg;
            oColorImg.onmouseout = showGrayImg;
            oCtx.clearRect(0, 0, nWidth, nHeight);
            oColorImg.style.display = "none";
            oColorImg.parentNode.insertBefore(oGrayImg, oColorImg);
        }
    } 
</script> 
</head> 
<body onload="removeColors();"> 
<p><img class="grayscale" src="chagall14.jpg" alt=""/></p> 
</body> 
</html> 

3.gif

Step 6 : Write the complete code to animate an image displayed in a browser.

 Code:

<html>
  <head>
    <meta charset='utf-8'>
  <title>Stanislaw Lem doodle</title>
    <style>
      html {
        height: 100%;
      }
      body {
        font-family: Arial, sans-serif;
        font-size: 83%;
        padding: 0;
        margin: 0;
        height: 100%;
      }
      a {
        color: black;
      }
      #content {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -260px;
        width: 520px;
        margin-top: -300px;
        height: 600px;
      }
      #doodle {
        width: 520px;
        height: 600px;
      }
      #doodle-temp {
        position: relative;
        left: 110px;
        top: 205px;
        width: 304px;
        height: 135px;
      }
      #prm {
        padding: 1em 0;
        width: 100%;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id='content'>
      <div id='doodle'>
      <img id='doodle-temp' src='http://images2.wikia.nocookie.net/__cb20110808151136/runescape/images/2/2c/Smithing2.gif'
             alt='60th anniversary of Stanislaw Lem's first book publication. Art inspired by "The Cyberiad" illustrations by Daniel Mróz.'>
      </div>
        </div>
    <script src='engine-const.js'></script>
    <script src='engine-helpers.js'></script>
    <script src='engine-actions.js'></script>
    <script src='engine-rects.js'></script>
    <script src='engine-actors.js'></script>
    <script src='engine-main.js'></script>
    <script src='lem-const.js'></script>
    <script src='lem-actors.js'></script>
    <script src='lem-scenes.js'></script>
    <script src='lem-images.js'></script>
    <script src='lem-images-sprite.js'></script>
    <script>
    engine.init();
 </script
>

555.gif

Resources:

COMMENT USING