Member Avatar for minghags

Hello can anyone help me with this problem: Im trying to do that this would bounce a image in the canvas area, but i manage to do that only with drawing.

here is my current code that i manage to write, and thanks in advance:

<script type="text/javascript">
var context;
var dx= 4;
var dy=4;
var y=300;
var x=10;
function draw(){
	context=canvasArea.getContext('2d');
	context.clearRect(0,0,500,500);
	context.beginPath();
	context.fillStyle="#FF0000";
	context.arc(x,y,10,0,Math.PI*2,true);
	context.closePath();
	context.fill();
	if( x<0 || x>500)
	dx=-dx;
	if( y<0 || y>500)
		dy=-dy;
		x+=dx;
		y+=dy;
	}
setInterval(draw,10); 
</script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vaja 7.3</title>
<style type="text/css">
<!--
    body { background-color:#ffffff; font:normal 12px/18px Arial, Helvetica, sans-serif; }
    #container { width:600px; }
    #canvasArea { background:#fff; border:2px solid #cbcbcb; }
-->
</style>
</head>
<body>
<div id="container">
	
	<canvas id="canvasArea" width="500" height="500"></canvas>
    
</div>

</body>
</html>
  • 1 Contributor
  • 1 Reply
  • 1K Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by minghags
Member Avatar for minghags

I solved it like this:

<html>
    <head>
        <title>Vaja 7.4</title>
        <style>
            div.canvasArea {display:block; border-style:solid;
                width:500px;height:500px; border-width:2px}
            div.premakni { position:absolute; }
            </style>
        <script language="javascript">
            var x = 10; // Začetna koordinata x.
            var y = 230; // Začetna koordinata y.
            var max_x = 460; // Maksimalna koordinata x.
            var max_y = 460; // Maksimalna koordinata y.
            var xpremik = 15; // Premik za 15px vsaki korak.
            var ypremik = 15; // Premik za 15px vsaki korak.
            function go()
            {
                premikSlike()
            }
            function premikSlike() {
                x = x + xpremik;
                y = y + ypremik;
                // Premik slike na novo pozicijo.
                document.getElementById("canvas").style.top = y+'px';
                document.getElementById("canvas").style.left = x+'px';
                // Če dosežemo limite, resetiramo premik vektor.
                if ((x+xpremik > max_x) || (x+xpremik < 0))
                xpremik *=-1;
                if ((y+ypremik > max_y) || (y+ypremik < 0))
                ypremik *=-1;
                window.setTimeout('premikSlike()',100);
                // Kličemo premikSlike vsake 100ms.
            }
            </script>
    </head>
    <body onload="go()">
        <div class="canvasArea">
            <div id="canvas" class="premakni">
                <img src="http://images2.fanpop.com/image/photos/10400000/apple-logo-apple-10475323-299-313.jpg" width="50px" height="50px" alt="Apple" />
            </div>
        </div>
    </body>
</html>

Now if anyone can help me with another problem. I want to make an drop down menu for size of canvas area and speed of image. How can i access drop down menu within javascript?

Thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.