User:Nan Wang/counting
<script>
var p;
// Define a draw function that contains your
// drawing code
q=1;
//i=1;
function draw(){
c = document.getElementById("canvas");
console.log("c is",c);
p = c.getContext("2d");
p.fillStyle="rgb(0,0,0)"
p.fillRect(0, 0, 800, 300);
// p.fillStyle = "rgb(300,225,0)";
drawBlocks();
q= q+2;
if(q>83)
{q=1};
//"rgb(255,0,0)";
//p.fillRect(0, 0, 100, 300);
// p.fillStyle = "rgb(0,225,0)";
//p.fillRect(9,0,100, 200);
// fillStyle = "rgb(0,225,0)";
// p.fillRect(300,0, 50, 30);
// fillStyle = "rgb(225,0,0)";
}
function drawBlocks(){
x = 0;
i = 0;
y=0;
z=0;
g=0;
while (i< 800){
p.fillRect(10*q,x,1,1);
p.fillRect(10*q+20,x,2,2);
p.fillRect(10*q+40,x,3,3);
p.fillRect(10*q+60,x,4,4);
p.fillRect(10*q+80,x,3,3);
p.fillRect(10*q+100,x,2,2);
p.fillRect(10*q+120,x,1,1);
p.fillRect(10*q+140,x,1,1);
p.fillRect(10*q+160,x,2,2);
p.fillRect(10*q+180,x,3,3);
p.fillRect(10*q+200,x,4,4);
p.fillRect(10*q+220,x,5,5);
p.fillRect(10*q+240,x,4,4);
p.fillRect(10*q+260,x,3,3);
p.fillRect(10*q+280,x,2,2);
p.fillRect(10*q+300,x,1,1);
p.fillRect(10*q+320,x,1,1);
p.fillRect(10*q+340,x,2,2);
p.fillRect(10*q+360,x,3,3);
p.fillRect(10*q+380,x,4,4);
p.fillRect(10*q+400,x,5,5);
p.fillRect(10*q+420,x,4,4);
p.fillRect(10*q+440,x,3,3);
p.fillRect(10*q+460,x,2,2);
p.fillRect(10*q+480,x,1,1);
p.fillRect(10*q+500,x,1,1);
p.fillRect(10*q+520,x,2,2);
p.fillRect(10*q+540,x,3,3);
p.fillRect(10*q-35,60,15,15);
p.fillRect(10*q-50,110,10,10);
p.fillRect(10*q-150,30,10,10);
p.fillRect(10*q-70,140,10,10);
p.fillRect(10*q-110,80,10,10);
p.fillRect(10*q-80,760,20,20);
p.fillRect(10*q-55,200,15,15);
p.fillRect(10*q-130,220,10,10);
p.fillRect(10*q-50,280,10,10);
p.fillRect(10*q-205,180,5,5);
p.fillRect(10*q+560,x,4,4);
p.fillRect(10*q+580,x,3,3);
p.fillRect(10*q-820,x,2,2);
p.fillRect(10*q-800,x,1,1);
p.fillRect(10*q-780,x,1,1);
p.fillRect(10*q-760,x,1,1);
p.fillRect(10*q-740,x,2,2);
p.fillRect(10*q-720,x,3,3);
p.fillRect(10*q-700,x,4,4);
p.fillRect(10*q-680,x,5,5);
p.fillRect(10*q-660,x,4,4);
p.fillRect(10*q-640,x,3,3);
p.fillRect(10*q-620,x,2,2);
p.fillRect(10*q-600,x,1 ,1);
p.fillRect(10*q-580,x,1,1);
p.fillRect(10*q-560,x,2,2);
p.fillRect(10*q-540,x,3,3);
p.fillRect(10*q-520,x,4,4);
p.fillRect(10*q-500,x,5,5);
p.fillRect(10*q-480,x,6,6);
p.fillRect(10*q-460,x,5,5);
p.fillRect(10*q-440,x,4,4);
p.fillRect(10*q-420,x,3,3);
p.fillRect(10*q-400,x,2,2);
p.fillRect(10*q-380,x,1,1);
p.fillRect(10*q-360,x,1,1);
p.fillRect(10*q-340,x,2,2);
p.fillRect(10*q-320,x,3,3);
p.fillRect(10*q-300,x,4,4);
p.fillRect(10*q-280,x,5,5);
p.fillRect(10*q-260,x,6,6);
p.fillRect(10*q-240,x,5,5);
p.fillRect(10*q-220,x,4,4);
p.fillRect(10*q-200,x,3,3);
p.fillRect(10*q-180,x,2,2);
p.fillRect(10*q-160,x,2,2);
p.fillRect(10*q-140,x,4,4);
p.fillRect(10*q-120,x,4,4);
p.fillRect(10*q-100,x,2,2);
p.fillRect(10*q-80,x,2,2);
p.fillRect(10*q-60,x,4,4);
p.fillRect(10*q-40,x,4,4);
p.fillRect(10*q-20,x,4,4);
p.fillStyle= "rgb("+y+","+z+","+g+")";
x = x + 5;
i = i + 5;
y = y+2;
z = z+9;
g = g+130;
//y=y+20
//if(y>525)
//{y=0};
//z=z+30
//if(z>850)
//{z=500};
// g=g+150
// if(g>225)
// {z=0};
//werew
//p.fillStyle(a,b,c);
}
}
setInterval("draw()",50);
//function doAlotofThings(){
//sum(10,50);
//draw();
//};
</script>
</head>
<body onload="draw()">
<hi> This is nan </hi>
HI my name is <a href="www.xxx.com" title="my home page">nan</a>
<canvas id="canvas" width="600" height="300"></canvas>
</body>
