| noobatjavascrip |
12-03-2012 05:28 AM |
Random movement of an image created using canvas
I created an ant using canvas. I need to randomly move the ant around the screen. I cant get my ant to move at all. I know how to do random movement. If I was using a div tag I could get it to work. But I dont know if canvas tags and div tags are the same.
So ultimately I just want the ant I drew in canvas to move randomly around the screen
Any help would be appreciated
Code:
<!DOCTYPE html>
<html>
<head>
<script>
pxv=-2
pyv=-1
function stroke(){
var O=document.getElementById("T")
var ctx=O.getContext("2d");
//ctx.strokeStyle=Dark();
ctx.beginPath();
//big body
ctx.bezierCurveTo(50, 200, 130, 120, 175, 200);
ctx.bezierCurveTo(175, 200, 130, 250, 50, 200);
//middle body
ctx.moveTo(175,200);
ctx.bezierCurveTo(175, 200, 210, 150, 230, 200);
ctx.bezierCurveTo(230, 200, 210, 230, 175, 200);
//little body
ctx.moveTo(230,200);
ctx.bezierCurveTo(230, 200, 240, 170, 260, 200);
ctx.bezierCurveTo(260, 200, 240, 215, 230, 200);
//top left leg
ctx.moveTo(175, 200);
ctx.lineTo(135, 140);
ctx.moveTo(135, 140);
ctx.lineTo(100, 130);
//top middle leg
ctx.moveTo(175, 200);
ctx.lineTo(175, 135);
ctx.moveTo(175, 135);
ctx.lineTo(155, 105);
//top right leg
ctx.moveTo(175, 200);
ctx.lineTo(200, 140);
ctx.moveTo(200, 140);
ctx.lineTo(190, 100);
//bottom left leg
ctx.moveTo(175, 200);
ctx.lineTo(140, 250);
ctx.moveTo(140, 250);
ctx.lineTo(100, 260);
//bottom middle leg
ctx.moveTo(175, 200);
ctx.lineTo(175, 255);
ctx.moveTo(175, 255);
ctx.lineTo(155, 280);
//bottom right leg
ctx.moveTo(175, 200);
ctx.lineTo(200, 260);
ctx.moveTo(200, 260);
ctx.lineTo(190, 280);
ctx.lineWidth = "3";
ctx.fillStyle = '#663333';
ctx.fill();
ctx.strokeStyle = '#000000';
ctx.stroke();
screenw=document.body.clientWidth-50
screenh=document.body.clientHeight-50
alert(screenw)
px=300
py=400
//return("stroke")
move()
}
function move(){
if (px>screenw) pxv=-pxv
if (px<0) pxv=-pxv
px=px+pxv
O.style.left=px
if (py>screenh) pyv=-pyv
if (py<0) pyv=-pyv
py=py+pyv
O.style.top=py
window.setTimeout("move()",10)
}
</script>
</head>
<body>
<canvas id="T" height="500" width="600"></canvas>
<input type="button" value="move" onclick="stroke()">
</body>
</html>
|
