Javascript 可以在HTML5.canvas中绘制大量简单的几何图形吗？

我有一段很棒的代码

正如你所想象的，这个想法是画一个矩形网格。我想要一个大网格，比如说100 X 100或更多

然而，当我以所需的大小（100x100）运行这段很棒的代码时，我的浏览器崩溃了

我怎样才能做到这一点

*请注意：当我说100X100时，我指的是最终的矩形数（10k），而不是画布的大小。

谢谢你

function init() {        
    var cnv = get('cnv');
    var ctx = cnv.getContext('2d');
    var ancho = 12; // ancho means width
    var alto = 12;  // alto means height
    ctx.fillStyle = randomRGB();

    for (var i = 0; i < cnv.width; i+= ancho) {
        for (var j = 0; j < cnv.height; j+= alto) {
            //dibujar means to draw, rectangulo means rectangle
            dibujarRectangulo(i+ 1, j+1, ancho, alto, ctx); 
        }
    }
}

function dibujarRectangulo(x, y, ancho, alto, ctx) {
    ctx.rect(x, y, ancho, alto);      
    ctx.fill();
    ctx.closePath();
}  

函数init（）{
var cnv=get（'cnv'）；
var ctx=cnv.getContext（'2d'）；
var ancho=12；//ancho表示宽度
var alto=12；//alto表示高度
ctx.fillStyle=randomRGB（）；
对于（变量i=0；i

dibujarRectanglo（）函数调用rect（）函数，该函数向当前路径添加一个闭合的矩形子路径。然后调用fill（）函数来填充当前路径。然后调用closePath（）函数关闭子路径，因为子路径已经关闭，所以它什么也不做

换句话说，第一个dibujarRectanglo（）函数调用是绘制一个包含1个矩形子路径的路径。第二个调用是绘制包含2个矩形子路径的路径。第三个调用是绘制包含3个矩形子路径的路径。等等如果循环调用dibujarRectanglo（）函数10000次，则将绘制总共1+2+3+…+10000=50005000（即超过5000万）个矩形子路径

dibujarRectangle（）函数每次都应该启动一个新路径。例如

function dibujarRectangulo(x, y, ancho, alto, ctx) {
    ctx.beginPath();
    ctx.rect(x, y, ancho, alto);      
    ctx.fill();
} 

然后10000个调用只会绘制10000个矩形子路径，这比绘制5000万个矩形子路径快得多。

dibujarRectanglo（）函数调用rect（）函数，该函数将一个闭合的矩形子路径添加到当前路径。然后调用fill（）函数来填充当前路径。然后调用closePath（）函数关闭子路径，因为子路径已经关闭，所以它什么也不做

换句话说，第一个dibujarRectanglo（）函数调用是绘制一个包含1个矩形子路径的路径。第二个调用是绘制包含2个矩形子路径的路径。第三个调用是绘制包含3个矩形子路径的路径。等等如果循环调用dibujarRectanglo（）函数10000次，则将绘制总共1+2+3+…+10000=50005000（即超过5000万）个矩形子路径

dibujarRectangle（）函数每次都应该启动一个新路径。例如

function dibujarRectangulo(x, y, ancho, alto, ctx) {
    ctx.beginPath();
    ctx.rect(x, y, ancho, alto);      
    ctx.fill();
} 

---

然后10000次调用只会绘制10000个矩形子路径，这比绘制5000万个矩形子路径快得多。

16384个框在墙上

正如我在评论中所说的，画很多框很容易，让它们都表现出独特的行为并不容易。无论如何，使用“渲染到自身”复制框有128*128个框，这是16K，再重复一次，它将是64K个框

这是个骗局，我可以随意画一些像素，然后把每个像素称为一个盒子

使用canvas，在使用FireFox的高端机器上，每帧最多可以获得4000个精灵，每个精灵都有一个位置、中心点、旋转、x和y比例以及一个alpha值。但这是一台全速运转的机器

使用WebGL可以获得更高的性能，但代码复杂度会增加

我使用一般的经验法则，如果一个canva 2D项目有1000多个精灵，那么它需要重新设计

var canvas=document.getElementById（“can”）；
var ctx=canvas.getContext（“2d”）；
/**CreateImage.js开始**/
var createImage=函数（w，h）{
var image=document.createElement（“画布”）；
image.width=w；
image.height=h；
image.ctx=image.getContext（“2d”）；
返回图像；
}
/**CreateImage.js结束**/
/**FrameUpdate.js开始**/
var w=画布宽度；
var h=画布高度；
var-cw=w/2；
var-ch=h/2；
var-boxSize=10；
var-boxSizeH=5；
var-timeDiv=1.2；
var bBSize=boxSize*128；//后缓冲区ssize
var buff=createImage（bBSize，bBSize）；
var rec=createImage（boxSize，boxSize）；
var drawRec=函数（ctx，时间）{
变量大小，x，y；
大小=（数学sin（时间/200）+1）*boxSizeH；
ctx.fillStyle=“hsl（“+Math.floor（（Math.sin（time/500）+1）*180）+”，100%，50%）”；
ctx.strokeStyle=“黑色”；
setTransform（1,0,0,1,0,0）
clearRect（0，0，boxSize，boxSize）；
x=数学cos（时间/400）；
y=数学sin（时间/400）；
setTransform（x，y，-y，x，boxSizeH，boxSizeH）
ctx.fillRect（-boxSizeH+尺寸，-boxSizeH+尺寸，boxSize-2*尺寸，boxSize-2*尺寸）；
ctx.strokeRect（-boxSizeH+尺寸，-boxSizeH+尺寸，boxSize-2*尺寸，boxSize-2*尺寸）；
}
功能更新（时间）{
变量fw，fh，px，py，i；
时间/=7；
setTransform（1,0,0,1,0,0）；
ctx.clearRect（0，0，w，h）；
drawRec（rec.ctx，时间）；
time/=timeDiv；
buff.ctx.clearRect（0，0，bBSize，bBSize）
buff.ctx.drawImage（rec，0，0）；
buff.ctx.drawImage（rec，boxSize，0）；
fw=boxSize+boxSize；//当前复制区域宽度
fh=boxSize；//当前复制区域高度
px=0；//当前复制到x位置
py=boxSize；//当前复制到y位置
buff.ctx.drawImage（buff，0，0，fw，fh，px，py，fw，fh）；//生成正方形
对于（i=0；i<6；i++）{
drawRec（rec.ctx，时间）；
time/=timeDiv；
buff.ctx.drawImage（rec，0，0）；
fh+=fh；//两倍尺寸
px=fw；
py=0；
buff.ctx.drawImage（buff，0，0，fw，fh，px，py，fw，fh）；//进行记录
drawRec（rec.ctx，时间）；
time/=timeDiv；
buff.ctx.drawImage（rec，0，0）；