Post
Ask Question

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 an HTML 5 that is used to show the image and text in an HTML 5 application. I hope this article helps to create an interactive flower on a canvas using HTML5 tools.
 
Step 1: First open an HTML editor such as Notepad.
  • Open start->Notepad.
  • The name of the editor is "canvas".
wakakakakak.gif
 
Step 2: Create a folder on a desktop.
  • Right-click on desktop->new->Folder.
  • The name of the 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 an 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 
  1. function drawLine(Flower, lineLayer)  
  2. {  
  3.          var stage = Flower.getStage();  
  4.          var ctx = lineLayer.getctx();  
  5.          ctx.save();  
  6.          ctx.beginPath();  
  7.          lineLayer.clear();  
  8.          ctx.strokeStyle = "green";  
  9.          ctx.lineWidth = 10;  
  10.          ctx.moveTo(Flower.x, Flower.y);  
  11.          ctx.lineTo(stage.width / 2, stage.height + 10);  
  12.          ctx.fill();  
  13.          ctx.stroke();  
  14.          ctx.closePath();  
  15.          ctx.restore();  
  16. } 
Step 6: Now in this step we set a center of a flower and set a color of a mouse over and mouse down event.
 
Code
  1. window.onload = function ()  
  2.      {  
  3.      var stage = new Kinetic.Stage("container", 578, 200);  
  4.      var FlowerLayer = new Kinetic.Layer();  
  5.      var lineLayer = new Kinetic.Layer();  
  6.      var Flower = new Kinetic.Group();  
  7.      var center = new Kinetic.Circle(  
  8.      {  
  9.      x: 0,  
  10.      y: 0,  
  11.      radius: 20,  
  12.      fill: "yellow",  
  13.      stroke: "black",  
  14.      strokeWidth: 4  
  15.         });  
  16.      center.on("mousedown", function ()  
  17.      {  
  18.      Flower.draggable(true);  
  19.      document.body.style.cursor = "pointer";  
  20.         });  
  21.      center.on("mouseover", function ()  
  22.      {  
  23.      this.setFill("orange");  
  24.      FlowerLayer.draw();  
  25.          });  
  26.      center.on("mouseout", function ()  
  27.      {  
  28.       this.setFill("yellow");  
  29.       FlowerLayer.draw();  
  30.   }); 
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
  1. var pxt = new Kinetic.Shape(  
  2.     {  
  3.       drawFunc: function () {  
  4.       var ctx = this.getctx();  
  5.       ctx.globalAlpha = 0.8;  
  6.       ctx.beginPath();  
  7.       ctx.lineWidth = 4;  
  8.       ctx.fillStyle = pxt.color;  
  9.       ctx.moveTo(-5, -20);  
  10.       ctx.bezierCurveTo(-40, -90, 40, -90, 5, -20);  
  11.       ctx.fill();  
  12.       ctx.stroke();  
  13.       ctx.closePath();  
  14.           },  
  15.       color: "#00dddd",  
  16.       draggable: true,  
  17.       rotation: 2 * Math.PI * n / numpxts  
  18.          });  
  19.      pxt.on("dragstart", function ()  
  20.      {  
  21.      this.moveToTop();  
  22.      center.moveToTop();  
  23.        });  
  24.      pxt.on("mouseover", function ()  
  25.     {  
  26.      this.color = "blue";  
  27.      FlowerLayer.draw();  
  28.                 });  
  29.      pxt.on("mouseout", function ()  
  30.      {  
  31.      this.color = "#00dddd";  
  32.      FlowerLayer.draw();  
  33.       }); 
Step 8 : Now in this step we define a demo of an interactive flower application code.
 
Code
  1. <html>  
  2.   <head>  
  3.   <script type="text/javascript">  
  4.   </script>  
  5.   </head>  
  6.   function drawLine(Flower, lineLayer)  
  7.       {  
  8.          var stage = Flower.getStage();  
  9.          var ctx = lineLayer.getctx();  
  10.          ctx.save();  
  11.          ctx.beginPath();  
  12.          lineLayer.clear();  
  13.          ctx.strokeStyle = "green";  
  14.          ctx.lineWidth = 10;  
  15.          ctx.moveTo(Flower.x, Flower.y);  
  16.          ctx.lineTo(stage.width / 2, stage.height + 10);  
  17.          ctx.fill();  
  18.          ctx.stroke();  
  19.          ctx.closePath();  
  20.          ctx.restore();  
  21.    }  
  22. window.onload = function ()  
  23.      {  
  24.      var stage = new Kinetic.Stage("container", 578, 200);  
  25.      var FlowerLayer = new Kinetic.Layer();  
  26.      var lineLayer = new Kinetic.Layer();  
  27.      var Flower = new Kinetic.Group();  
  28.      var center = new Kinetic.Circle(  
  29.     {  
  30.      x: 0,  
  31.      y: 0,  
  32.      radius: 20,  
  33.      fill: "yellow",  
  34.      stroke: "black",  
  35.      strokeWidth: 4  
  36.         });  
  37.      center.on("mousedown", function () {  
  38.      Flower.draggable(true);  
  39.      document.body.style.cursor = "pointer";  
  40.         });  
  41.      center.on("mouseover", function ()  
  42.     {  
  43.      this.setFill("orange");  
  44.      FlowerLayer.draw();  
  45.          });  
  46.      center.on("mouseout", function ()  
  47.      {  
  48.       this.setFill("yellow");  
  49.       FlowerLayer.draw();  
  50.        });  
  51.   var pxt = new Kinetic.Shape(  
  52.      {  
  53.       drawFunc: function ()  
  54.        {  
  55.       var ctx = this.getctx();  
  56.       ctx.globalAlpha = 0.8;  
  57.       ctx.beginPath();  
  58.       ctx.lineWidth = 4;  
  59.       ctx.fillStyle = pxt.color;  
  60.       ctx.moveTo(-5, -20);  
  61.       ctx.bezierCurveTo(-40, -90, 40, -90, 5, -20);  
  62.       ctx.fill();  
  63.       ctx.stroke();  
  64.       ctx.closePath();  
  65.           },  
  66.       color: "#00dddd",  
  67.       draggable: true,  
  68.       rotation: 2 * Math.PI * n / numpxts  
  69.          });  
  70.      pxt.on("dragstart", function ()  
  71.       {  
  72.      this.moveToTop();  
  73.      center.moveToTop();  
  74.        });  
  75.      pxt.on("mouseover", function ()  
  76.       {  
  77.      this.color = "blue";  
  78.      FlowerLayer.draw();  
  79.                 });  
  80.      pxt.on("mouseout", function ()  
  81.       {  
  82.      this.color = "#00dddd";  
  83.      FlowerLayer.draw();  
  84.       });  
  85.   <body onmousedown="return false;" bgcolor="#ff99cc">  
  86.   <h1>Tom crate a interactive Flower</h1>  
  87.   <div id="container">  
  88.   </div>  
  89.   </body>  
  90. </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 are some useful resources


TRENDING UP

View All