Step 1 : First open a HTML editor such as Notepad.
- Open start->Notepad.
- The name of editor is "Demo".
Step 2 : Create a Folder on a desktop.
- Right-click on desktop->new->Folder.
- Name of folder is "Tom".
Step 3 : Open Visual Studio.
- Go to file -> New->Projects.
- Crete an ASP. NET Web Application.
- Name of "Goodies.aspx".
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 "Play.html".
Step 5 : Now in this step we add a CSS file that sets all properties of a canvas body. Through CSS we set color, size and font properties of a canvas body.
Code
body
{
background: #333;
color:Lime;
font: 300 100.1% "Helvetica Neue";
}
#holder
{
height: 480px;
left: 50%;
margin: -240px 0 0 -320px;
position:relative;
top: 50%;
width: 640px;
}
#copy
{
bottom: 0;
font: 300 .7em "Helvetica Neue";
position:relative;
right: 1em;
text-align: right;
}
#copy a
{
color:Green;
}
Step 6 : Now in this step we apply the style of playground.
Code
<style type="text/css" media="screen">
body
{
margin: 0;
padding: 0;
text-align: center;
}
h1 {
font-weight: 400;
height: 10%;
}
#canvas
{
height: 732px;
margin:20 auto;
text-align:center;
width: 1015px;
background-color:Green;
}
#code
{
font-family: "Lucida Console", monospace;
height: 4em;
margin: 10px;
padding: 0;
width: 90%;
}
#run
{
font-size: 2em;
}
</style>
Step 7 : Add a JavaScript file to the application. The T1.js file provides the functionality of dynamically move a playground. Set a D1.css that sets color, size and font properties of a playground body.
Code
<link rel="stylesheet" href="D1.css" media="screen"/>
<script type="text/javascript" src="Scripts/T1.js"></script>
Step 8 : Now in this step we define an onclick function that is used when the circle is clicked to perform an action.
Code
(btn.onclick = function ()
{
ctx.clear();
ctx.rect(0, 0, 640, 480, 10).attr({ fill: "#66ff99", stroke: "none" });
try
{
(new Function("ctx", "window", "document", cd.value)).call(ctx, ctx);
}
catch (e)
{
alert(e.message || e);
}
Step 9 : The complete code of the application is given below.
Code
<html>
<head>
<title>Tom application</title>
<link rel="stylesheet" href="D1.css" type="text/css" media="screen"/>
<script type="text/javascript" src="Scripts/T1.js"></script>
<style type="text/css" media="screen">
body
{
margin: 0;
padding: 0;
text-align: center;
}
h1
{
font-weight: 400;
height: 10%;
}
#canvas
{
height: 732px;
margin:20 auto;
text-align:center;
width: 1015px;
background-color:Green;
}
#code
{
font-family: "Lucida Console", monospace;
height: 4em;
margin: 10px;
padding: 0;
width: 90%;
}
#run
{
font-size: 2em;
}
</style>
window.onload = function ()
{
var ctx = Raphael("canvas", 640, 480),
btn = document.getElementById("run"),
cd = document.getElementById("code");
(btn.onclick = function ()
{
ctx.clear();
ctx.rect(0, 0, 640, 480, 10).attr({ fill: "#66ff99", stroke: "none" });
try
{
(new Function("ctx", "window", "document", cd.value)).call(ctx, ctx);
}
catch (e)
{
alert(e.message || e);
}
</script>
</head>
<body>
<h1>Developed Playground Using HTML5</h1>
<div id="canvas" style="background-color: #8080FF"></div>
</body>
</html>
Step 10 : Press Ctrl + F5 to run the application in a browser.
Output
Resources
Here is some useful resources :