Canvas application are a bit different from other apps that run in the web browser. Because Convas executes its display in a defined region of the screen, its functionality is most likely self-contained so it should not interfere with the rest of the page, and vice versa. You might also want to put multiple canvas apps on the same page so there must be some kind of separation of JavaScript when defining the code.
You can encapsulate your variables and functions by placing them inside another function. Function in JavaScript are objects themselves and objects in JavaScript can have both properties and methods. By placing a function inside another function, you are making the second function local in scope to the first function.
We are going to have the canvasApp() function that is called from the window load event contain our entire Canvas application.
This "Hello World" Example will have one function named drowScreen(). As soon as canvasApp() is called, we will call drawScreen() immediately to draw our "Hello World" text.
The drawScreen() function is now local to canvasApp(). Any variable or functions we create in canvasApp() will be lacal to drawScreen() but not to the rest of the HTML page or other JavaScript application that might be running.
like:
function canvasApp()
{
drawScreen();
.....
function drawScreen()
{
...
}
}
Adding Canvas to HTML page:
In the <body> section of the HTML page add a <canvas> tag using code such as the following:
<canvas id="canvasOne" width="500" height="300">
Message : Your browser does not support HTML5 convas.
</canvas>
The canvas tag has three main attributes. In HTML attributes are set within pointy brackets of an HTML tag.
id:
The id is the name we will use to reference this <canvas > tag in our Javascript cade.
canvasOne is the name we will use.
width:
The width in pixels of the canvas. The width will be 500 pixels.
height:
The height in pixels of the canvas. the height will be 300 pixels.
Between the opening <canvas> and </canvas> tags you can put text that will be displayed if the browser executing the HTML page does not support Canvas.
Canvas element in JavaScript:
var theCanvas=document.getElementById("canvasOne");
You can encapsulate your variables and functions by placing them inside another function. Function in JavaScript are objects themselves and objects in JavaScript can have both properties and methods. By placing a function inside another function, you are making the second function local in scope to the first function.
We are going to have the canvasApp() function that is called from the window load event contain our entire Canvas application.
This "Hello World" Example will have one function named drowScreen(). As soon as canvasApp() is called, we will call drawScreen() immediately to draw our "Hello World" text.
The drawScreen() function is now local to canvasApp(). Any variable or functions we create in canvasApp() will be lacal to drawScreen() but not to the rest of the HTML page or other JavaScript application that might be running.
like:
function canvasApp()
{
drawScreen();
.....
function drawScreen()
{
...
}
}
Adding Canvas to HTML page:
In the <body> section of the HTML page add a <canvas> tag using code such as the following:
<canvas id="canvasOne" width="500" height="300">
Message : Your browser does not support HTML5 convas.
</canvas>
The canvas tag has three main attributes. In HTML attributes are set within pointy brackets of an HTML tag.
id:
The id is the name we will use to reference this <canvas > tag in our Javascript cade.
canvasOne is the name we will use.
width:
The width in pixels of the canvas. The width will be 500 pixels.
height:
The height in pixels of the canvas. the height will be 300 pixels.
Between the opening <canvas> and </canvas> tags you can put text that will be displayed if the browser executing the HTML page does not support Canvas.
Canvas element in JavaScript:
var theCanvas=document.getElementById("canvasOne");
No comments:
Post a Comment