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. 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".
    Notepad

Step 2. Create a folder on a desktop.

  • Right-click on desktop->new->Folder.
  • The name of the folder is "Tom".
    New\

Step 3. Open Visual Studio.

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

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 page

Step 5. Now in this step, we define a function named drawling(). This function opens or closes a path and defines the 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>  
<body onmousedown="return false;" bgcolor="#ff99cc">  
<h1>Tom crate a interactive Flower</h1>  
<div id="container">  
</div>  
<script>
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();  
    });  
};  
</script>
</body>  
</html>

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

Output

Tom crate a interactive flower

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

Click mouse on center

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

Click mouse on a petal of a flower

Resources

Here are some useful resources


Similar Articles