基本上，我想画一个小正方形，然后再画一个，然后再画一个，直到它在水平和垂直方向上填充屏幕。我想实际看到每个方块被绘制的动画。
我不知道如何做到这一点。我知道html画布有一个createppattern功能，但我认为使用图像，我需要这些方块链一个接一个(不是一次全部)。
任何想法?
使用jquery, canvas, svg, css3, html5或流行的svg或js库的解决方案是好的。
这是您想要的结果吗?
<html>
<head>
<script>
var sq_size=10;
var sq_pos_x = 0-sq_size;//see comment in drawtick
var sq_pos_y = 0;
var can_width=800;
var can_height=600;
var tmr;
function startTimer(){
tmr = setInterval(function(){drawtick()}, 20);
}
function drawtick(){
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//the first drawn square should not be on x+ sq_size
// instead of adding an extra if statement, I just initialized it on -sq_size
if(sq_pos_x+sq_size>=can_width) {sq_pos_y=sq_pos_y+sq_size;sq_pos_x=0}else{sq_pos_x=sq_pos_x+sq_size;}
if(sq_pos_y>=can_height){clearInterval(tmr);alert('loop ended');}
ctx.rect(sq_pos_x,sq_pos_y,sq_size,sq_size);
ctx.stroke();
}
</script>
</head>
<body onload="startTimer()">
<canvas id="myCanvas" width="800" height="600" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</body>
</html>
或
http://jsfiddle.net/kKyA5/这都取决于绘制动画
你应该尝试一下canvas，它是面向对象的javascript，它基于html5 canvas标签来绘制，它将允许你做一些非常整洁的东西，并处理动画。基本上你需要用一个像这样的id来定义canvas标签:
<canvas id="canvas" width="354" height="100"></canvas>
然后实例化核心对象:
var canvas = oCanvas.create({
canvas: "#canvas",
background: "#0cc"
});
之后，你可以像这样画正方形:
var limit = 50;
var reduction = 2; //minus two pixels for iteration
var width = 202;
var height = 202;
for (var i = 1; i <= limit; ++i){
var rectangle = canvas.display.rectangle({
x: 77,
y: 77,
width: width,
height: height,
fill: "#0aa"
});
width = width - reduction;
height = width - reduction;
canvas.addChild(rectangle,false);
}
，然后一次全部画出来:
canvas.draw.redraw();
或者你也可以把它做成动画
有很好的文档