Question

我测试更好的方法来绘制很多＆＃34;很多＆＃34;使用javascript canvas HTML5进行对象。

此演示获得的结果demo performance on jsPerf令人印象深刻。但我想完成自己的测试。

我的直接渲染版本：

class myClass extends subclass{
    constructor(context,pX,pY,sX,sY,round,color) {
        //...
        //processing 
        //...       
    }

    drawObj(decX,decY,zoom){
        this.roundRect(this.p_ctx, decX+this.p_pX*zoom, decY+this.p_pY*zoom, this.p_sX*zoom, this.p_sY*zoom, this.p_round*zoom, true, false,this.p_color);
    }
    roundRect(ctx, x, y, width, height, radius, fill, stroke,color) {
        //...
        //trace round rectangle on the ctx canvas
    }
}

我的预呈现版本：

class myClass extends subclass{
    constructor(context,pX,pY,sX,sY,round,color) {
        //...
        //processing 
        //...       

        //trace and save drawing in local canvas
        this.p_canvas = document.createElement('canvas');
        this.p_canvas.width = this.p_sX;
        this.p_canvas.height = this.p_sY;
        this.p_ctx_local = this.p_canvas.getContext('2d');
        this.roundRect(this.p_ctx_local, 0,0, this.p_sX, this.p_sY, this.p_round, true, false,this.p_color);

    }

    drawObj(decX,decY,zoom){
        this.p_ctx.drawImage(this.p_canvas, this.p_pX*zoom+decX,this.p_pY*zoom+decY,this.p_sX*zoom,this.p_sY*zoom );        
    }
    roundRect(ctx, x, y, width, height, radius, fill, stroke,color) {
        //...
        //trace round rectangle on the ctx canvas
    }
}

我的测试包括通过调用drawObj函数绘制1000个myClass对象。我做了几个循环以获得稳定的结果。

我的结果：

在桌面设备上（Chrome）：65ms渲染/ 61ms预渲染

在移动设备上（Chrome nexus 6）：85ms渲染/ 90ms预渲染

我获得的结果显示使用预渲染并不感兴趣，因为它们在初始化时需要大量的资源，而直接渲染在预渲染时具有接近的结果，但更容易使用。

我不明白为什么我的结果与jsPerf不同（可能是因为我绘制了不同的背景）。

我的错误在哪里？

渲染vs预渲染javascript画布HTML5

0 个答案: