...

View Full Version : Canvas and movement... Enjoy



noobatjavascrip
12-05-2012, 06:08 AM
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.



<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum