Now we are going to build hadbaSawir();
As you know canvaska waa sida TV Screen. It draws the image and redraw it again. Since the animation is about 15 seconds. You can't see it.
first we need to clear the canvaska every time up it renders.. Ok..
let' do it
Beautiful: so now all you need is bring the image to the canvaska. Ok..function hadbaSawir()
{
meeshaSawirka.clearRect(0,0, canvaska.width, canvaska.height);
}
Before we do that. Remember arrow.png is in the array xafidSawir(); We have to test if that array holds any image at all.
let' test it.
Very good.. Waxaan ku dhahay haduuna empty aheen. Then do something..function hadbaSawir()
{
meeshaSawirka.clearRect(0,0, canvaska.width, canvaska.height);
if(xafidSawir.length!==0)
{
}
}
Let's do something.. We are going to draw the image on the canvas..
function hadbaSawir()
{
meeshaSawirka.clearRect(0,0, canvaska.width, canvaska.height);
if(xafidSawir !==0)
{
for(var i=0; i<xafidSawir.length; i++)
{
var sawirkaan=xafidSawir;
meeshaSawirka.drawImage(image, sawirkaan.sawirX, sawirkaan.sawirY,sawirkaan.sawirWidth, sawirkaan.sawirHeight, Math.floor(sawirkaan.x), Math.floor(sawirkaan.y),
sawirkaan.width, sawirkaan.height);
}
}
}
Woow I can't believe we draw the image on to the canvas using drawImage...
On the of Math.floor, all I am doing to round up to one.. That is all..
All the properties we passed in our template object oo ahaa sawirObject...
As you variableka sawirkaan waxaan ku lifaaqinay meeshii uu ku xafidnaa sawirkaan oo aheed variableka xafidSawir();
We for loop the array to get the image it holds. In this case we have only one image.. We can put many images such as background.
you will see soon.
That is the question I will answer the next lesson...So how do we put all these codes together?
<<Previous Lesson