| noobatjavascrip |
12-05-2012 06:08 AM |
Canvas and movement... Enjoy
Just a cool script I made drawing and ant in canvas using bezier curves. It detects the edges of screen (could be better) and changes colors.
Code:
<!DOCTYPE html>
<html>
<head>
<script>
xv=10
yv=10
posx=25
posy=200
screenw=950
screenh=500
Ax=[50,100,130,135,140,155,175,190,200,210,230,240,260]
Ay=[100,105,120,130,135,140,150,170,200,215,230,250,255,260,280]
function stroke(){
O=document.getElementById('Q')
Q.width=Q.width
var ctx=O.getContext("2d");
ctx.lineWidth = "3";
ctx.strokeStyle = '#000000';
ctx.fillStyle = '#663333'
if(posx>850)
ctx.fillStyle = '#ff0000'
if(posx<50)
ctx.fillStyle = '#000000'
if(posy<60)
ctx.fillStyle = '#996600'
for (j=0;j<15;j++){
Ay[j]+=yv
}
for (i=0;i<13;i++){
Ax[i]+=xv
}
//big body
ctx.bezierCurveTo(Ax[0], Ay[8], Ax[2], Ay[2], Ax[6], Ay[8]);
ctx.bezierCurveTo(Ax[6], Ay[8], Ax[2], Ay[11], Ax[0], Ay[8]);
//middle body
ctx.moveTo(Ax[6],Ay[8]);
ctx.bezierCurveTo(Ax[6], Ay[8], Ax[9], Ay[6], Ax[10], Ay[8]);
ctx.bezierCurveTo(Ax[10], Ay[8], Ax[9], Ay[10], Ax[6], Ay[8]);
//little body
ctx.moveTo(Ax[10],Ay[8]);
ctx.bezierCurveTo(Ax[10], Ay[8], Ax[11], Ay[7], Ax[12], Ay[8]);
ctx.bezierCurveTo(Ax[12], Ay[8], Ax[11], Ay[9], Ax[10], Ay[8]);
//top left leg
ctx.moveTo(Ax[6], Ay[8]);
ctx.lineTo(Ax[3], Ay[5]);
ctx.moveTo(Ax[3], Ay[5]);
ctx.lineTo(Ax[1], Ay[3]);
//top middle leg
ctx.moveTo(Ax[6], Ay[8]);
ctx.lineTo(Ax[6], Ay[4]);
ctx.moveTo(Ax[6], Ay[4]);
ctx.lineTo(Ax[5], Ay[1]);
//top right leg
ctx.moveTo(Ax[6], Ay[8]);
ctx.lineTo(Ax[8], Ay[5]);
ctx.moveTo(Ax[8], Ay[5]);
ctx.lineTo(Ax[7], Ay[0]);
//bottom left leg
ctx.moveTo(Ax[6], Ay[8]);
ctx.lineTo(Ax[4], Ay[11]);
ctx.moveTo(Ax[4], Ay[11]);
ctx.lineTo(Ax[1], Ay[13]);
//bottom middle leg
ctx.moveTo(Ax[6], Ay[8]);
ctx.lineTo(Ax[6], Ay[12]);
ctx.moveTo(Ax[6], Ay[12]);
ctx.lineTo(Ax[6], Ay[14]);
//bottom right leg
ctx.moveTo(Ax[6], Ay[8]);
ctx.lineTo(Ax[8], Ay[13]);
ctx.moveTo(Ax[8], Ay[13]);
ctx.lineTo(Ax[7], Ay[14]);
ctx.stroke();
ctx.fill();
if (posx>screenw) xv=-xv
if (posx<0) xv=-xv
posx=posx+xv
O.style.left=posx
if (posy>screenh) yv=-yv
if (posy<0) yv=-yv
posy=posy+yv
O.style.top=posy
setTimeout("stroke()", 100)
}
</script>
</head>
<body onload="stroke('Q')">
<canvas id="Q" height="546" width="1300"></canvas>
</body>
</html>
|
