In my interface I want to put an animated picture (moving from right to left) on top of the screen and then 2 static pictures in the bottom of the screen. This is the code:
- Code: Select all
<style type="text/css">
#div1 {width:800px;height:70px;padding:10px;border:10px solid #aaaaaa;}
</style>
<script type="text/javascript">
var data = { 'img1': { 'imgheight' :100, 'imgwidth' : 100, 'x' : 250,'y' : 10, 'image' : 'animatepic.png' } };
</script>
</head>
<body>
<div style="width:100%;height:100%;border:1px solid blue;" align="center">
<canvas id="canvas" width="800px" height="100px" style="border:1px solid red;"></canvas>
<canvas id="canvascharacter" width="800px" height="800px"></canvas>
</div>
<script type="text/javascript">
var ctx = document.getElementById('canvas').getContext('2d');
var ctxcharacter = document.getElementById('canvascharacter').getContext('2d');
ctx.textAlign="right";
function init()
{
//scene1
scene1();
}
function scene1()
{
//drawthe characters and conversation
drawcharscene1();
//draw the animated airplane
// setInterval(startTask,1);
}
function drawcharscene1()
{
drawImage('characters',10,300,100,100,'character1.png');
drawImage('characters',150,300,100,100,'character2.png');
}
function clear()
{
ctx.clearRect(0,0,500,500);
}
function drawImage(whichimage,x,y,imgwidth,imgheight,url)
{
img = new Image();
img.src = url;
if(whichimage=='animpic')
ctx.drawImage(img,x,y,imgwidth,imgheight);
else
ctxcharacter.drawImage(img,x,y,imgwidth,imgheight);
}
function startTask()
{
clear();
drawImage('animpic',data['img1']['x'],data['img1']['y'],data['img1']['imgwidth'],data['img1']['imgheight'],data['img1']['image']);
if(data['img1']['x']>0)
{
data['img1']['x'] -=1;
if(data['img1']['y'] < 5)
{
data['img1']['y'] +=1;
} else {
data['img1']['y'] -=1;
}
} else {
data['img1']['x'] =250;
}
}
window.onload = function()
{
init();
}
</script>
</body>
There are a few issues with this:
1. When I open the HTML file, sometimes the character pictures failed to show up so I have to refresh the page then the pictures will come out. Any ideas on how to make it all appear at the same time ?
2. After I leave the page open for a while, it seems the page becomes heavier and heavier (and I notice that my computer is processing something) to navigate. At some point, it even crash. Any suggestion on this please ?
Thank !!