Creating canvas
Canvas is a rectangular space on page, which is blank until you draw something on it. We can draw stuff on canvas using JS.
Now, lets go ahead and create a canvas and draw some text on it.
We can define canvas in html page or we can create it using JS function.
In HTML
[code language="html"]
<canvas id="<span class=">myCanvas" width="500" height ="300">Canvas not supported</canvas></canvas>
[/code]
and save the canvas object in JS variable
[code language="javascript"]
canvas= document.getElementById("myCanvas");
[/code]
In JS
[code language="javascript"]
var canvas = document.createElement('canvas');
canvas.id = 'myCanvas';
canvas.width = 1224;
canvas.height = 768;
[/code]
Once we have created canvas, we need to attach canvas to html body. This is required only if we are creating canvas in JS.
[code language="javascript"]
document.body.appendChild(canvas);</span>
[/code]
Simply, we can create and append canvas tag in one line of code like this
[code]
document.body.innerHTML += '<canvas id="myCan"></canvas>';
[/code]
Getting 2D Context
Now, we need to get context of canvas.
[code language="javascript"]
var context = canvas.getContext("2d");
[/code]
Main function
Creating canvas and fetching context will be part of all programs. Once we have created canvas, we can start drawing objects on canvas.
The basic structure of our programs would be something like
[code language="javascript"]
function loop(){
requestAnimFrame (loop); // user defined function for looping, time interval based
//input handler
update(); //update coordinates for each new draw
clear(); // clear canvas to give animation effect
render(); //draw the object
}
[/code]
Check out this links to understand differences between setTimInterval setTimeOut and requestAnimationFrame functions and reason for fallback function
http://creativejs.com/resources/requestanimationframe/
https://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/
We need to refresh canvas after some fixed interval to create animation effect. We will clear the canvas and redraw the objects at new position.
[code language="javascript"]
// http://paulirish.com/2011/requestanimationframe-for-smart-animating
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
[/code]
Draw
Draw on the canvas context
[code language="javascript"]
//draw function
function render() {
// draw text
context.fillStyle ='#fcd';
context.font = "normal 16px Arial";
context.fillText("Hello there!", textX, textY);
}
[/code]
Clear Canvas
[code language="javascript"]
context.clearRect(0,0,context.canvas.width,context.canvas.height);
[/code]
Now, lets put everything together to create text scroll effect
[code language="javascript"]
<html>
<head>
<script ></script>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border:1px solid #ccc;
}
</style>
</head>
<body>
<script>
//global variables
//create canvas
var canvas = document.createElement('canvas');
canvas.id = 'myCanvas';
canvas.width ='500';
canvas.height ='300';
document.body.appendChild(canvas);
//get 2d context
var context = canvas.getContext("2d");
function loop(){
requestAnimFrame(loop); //refresh screen for animation
update(); //update coordinates for each new draw
clear(); // clear canvas to give animation effect
render(); //draw the object
}
//position of text
var textX = 20;
var textY = 30;
//draw function
function render() {
context.fillStyle ='#fcd';
context.font = "normal 16px Arial";
context.fillText("Hello there!", textX, textY);
}
// http://paulirish.com/2011/requestanimationframe-for-smart-animating
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
function clear(){
context.clearRect(0,0,context.canvas.width,context.canvas.height);
}
function update(){
textX += 1;
}
//call onload
loop();
</script>
</body>
</html>
[/code]
Output of the program will look like this
The text will move past the screen, but that's ok, we will handle that logic later to keep object within canvas.
[…] structure of our program is gonna be same, as discussed in part1. We will code same main […]
ReplyDelete