Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point

Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
HTML 5

Create an Interactive Flower Using HTML5


Introduction

This is a simple application for beginners that shows how to create an interactive flower on a canvas using HTML5. We know that HTML 5 is the advanced version of HTML. Basically HTML 5 can be used to develop 3D applications. This article is intended to help with the use of HTML5 tools to develop an interactive flower on a canvas application. <canvas> is an HTML element which can be used to draw graphics using scripting. It can be used to draw graphs to make photo compositions or do simple animations. The <canvas> element is a bitmap drawing API and once you have committed to a set of pixels you are stuck with them. Canvas is an important tag of a HTML 5 that is used to show the image and text in a HTML 5 application. I hope this article helps to create an interactive flower on a canvas using HTML5 tools.

Step 1 : First open a HTML editor such as Notepad.

  • Open start->Notepad.
  • The name of editor is "canvas".

wakakakakak.gif

Step 2 : Create a folder on a desktop.

  • Right-click on desktop->new->Folder.
  • Name of folder is "Tom".

folder.gif

Step 3 : Open Visual Studio.

  • Go to file -> New->Projects.
  • Crete an ASP. NET Web Application.
  • Name of "Flower.aspx".

new.gif

webapplication.gif

Step 4 : Add a HTML file to your web application.

  • Right-click on Solution Explorer.
  • Add->add new item->HTML form.
  • The Name of the HTML form is "Demo.html".

html.gif

Step 5 : Now in this step we define a function named drawling(). This function opens or closes a path and defines a height and width of a flower.

Code  

function drawLine(Flower, lineLayer)
     {

         var stage = Flower.getStage();

         var ctx = lineLayer.getctx();

         ctx.save();

         ctx.beginPath();

         lineLayer.clear();

         ctx.strokeStyle = "green";

         ctx.lineWidth = 10;

         ctx.moveTo(Flower.x, Flower.y);

         ctx.lineTo(stage.width / 2, stage.height + 10);

         ctx.fill();

         ctx.stroke();

         ctx.closePath();

         ctx.restore();

}

Step 6 : Now in this step we we set a center of a flower and set a color of a mouse over and mouse down event.

 

Code

 

window.onload = function ()
     {

     var stage = new Kinetic.Stage("container", 578, 200);

     var FlowerLayer = new Kinetic.Layer();

     var lineLayer = new Kinetic.Layer();

     var Flower = new Kinetic.Group();

     var center = new Kinetic.Circle(
     {

     x: 0,

     y: 0,

     radius: 20,

     fill: "yellow",

     stroke: "black",

     strokeWidth: 4

        });

     center.on("mousedown", function ()
     {

     Flower.draggable(true);

     document.body.style.cursor = "pointer";

        });

     center.on("mouseover", function ()
     {

     this.setFill("orange");

     FlowerLayer.draw();

         });

     center.on("mouseout", function ()
     {

      this.setFill("yellow");

      FlowerLayer.draw();

  });

Step 7 : Now in this step we set how many layers are defined in the flower and set a curve, color, rotation, of the flower layer.

Code

var pxt = new Kinetic.Shape(
    {

      drawFunc: function () {

      var ctx = this.getctx();

      ctx.globalAlpha = 0.8;

      ctx.beginPath();

      ctx.lineWidth = 4;

      ctx.fillStyle = pxt.color;

      ctx.moveTo(-5, -20);

      ctx.bezierCurveTo(-40, -90, 40, -90, 5, -20);

      ctx.fill();

      ctx.stroke();

      ctx.closePath();

          },

      color: "#00dddd",

      draggable: true,

      rotation: 2 * Math.PI * n / numpxts

         });

     pxt.on("dragstart", function ()
     {

     this.moveToTop();

     center.moveToTop();

       });

     pxt.on("mouseover", function ()
    {

     this.color = "blue";

     FlowerLayer.draw();

                });

     pxt.on("mouseout", function ()
     {

     this.color = "#00dddd";

     FlowerLayer.draw();

      });

Step 8 :  Now in this step we define a demo of an interactive flower application code.

 

Code

 

<html>

  <head>

  <script type="text/javascript">

  </script>

  </head>

  function drawLine(Flower, lineLayer)
      {

         var stage = Flower.getStage();

         var ctx = lineLayer.getctx();

         ctx.save();

         ctx.beginPath();

         lineLayer.clear();

         ctx.strokeStyle = "green";

         ctx.lineWidth = 10;

         ctx.moveTo(Flower.x, Flower.y);

         ctx.lineTo(stage.width / 2, stage.height + 10);

         ctx.fill();

         ctx.stroke();

         ctx.closePath();

         ctx.restore();

   }

window.onload = function ()
     {

     var stage = new Kinetic.Stage("container", 578, 200);

     var FlowerLayer = new Kinetic.Layer();

     var lineLayer = new Kinetic.Layer();

     var Flower = new Kinetic.Group();

     var center = new Kinetic.Circle(
    {

     x: 0,

     y: 0,

     radius: 20,

     fill: "yellow",

     stroke: "black",

     strokeWidth: 4

        });

     center.on("mousedown", function () {

     Flower.draggable(true);

     document.body.style.cursor = "pointer";

        });

     center.on("mouseover", function ()
    {

     this.setFill("orange");

     FlowerLayer.draw();

         });

     center.on("mouseout", function ()
     {

      this.setFill("yellow");

      FlowerLayer.draw();

       });

  var pxt = new Kinetic.Shape(
     {

      drawFunc: function ()
       {

      var ctx = this.getctx();

      ctx.globalAlpha = 0.8;

      ctx.beginPath();

      ctx.lineWidth = 4;

      ctx.fillStyle = pxt.color;

      ctx.moveTo(-5, -20);

      ctx.bezierCurveTo(-40, -90, 40, -90, 5, -20);

      ctx.fill();

      ctx.stroke();

      ctx.closePath();

          },

      color: "#00dddd",

      draggable: true,

      rotation: 2 * Math.PI * n / numpxts

         });

     pxt.on("dragstart", function ()
      {

     this.moveToTop();

     center.moveToTop();

       });

     pxt.on("mouseover", function ()
      {

     this.color = "blue";

     FlowerLayer.draw();

                });

     pxt.on("mouseout", function ()
      {

     this.color = "#00dddd";

     FlowerLayer.draw();

      });
  <body onmousedown="return false;" bgcolor="#ff99cc">

  <h1>Tom crate a interactive Flower</h1>

  <div id="container">

  </div>

  </body>

</html>

Step 9 : Press Ctrl + F5 to run the code in a browser.

Output


x.gif

Click the mouse on the center; after that the color changes.

y.gif

Click the mouse on a petal of a flower; after that the color changes.

z.gif

Resources

Here is some useful resources

Up Next
    Ebook Download
    View all
    Learn
    View all