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".
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".
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".
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 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
Click the mouse on the center; after that, the color changes.
Click the mouse on a petal of a flower; after that, the color changes.
Resources
Here are some useful resources