javascript - 关于 javascript-canvas 对象的问题(保存、转换、恢复)

Question

我最近一直在玩 Canvas 。现在我正在尝试构建一个小的 UI 库，here is a demo to a simple list (注意:使用箭头键，仅限 Chrome/Firefox) 如您所知，性能有点差 - 这是因为我删除并重新绘制了每一帧上的每个项目:

this.drawItems = function(){
    this.clear();
    if(this.current_scroll_pos != this.scroll_pos){
        setTimeout(function(me) { me.anim(); }, 20, this);
    }
    for (var i in this.list_items){
        var pos = this.current_scroll_pos + i*35;
        if(pos > -35 && pos < this.height){
            if(i == this.selected){
                this.ctx.fillStyle = '#000';
                this.ctx.fillText (this.list_items[i].title, 5, pos);
                this.ctx.fillStyle = '#999';
            } else {
                this.ctx.fillText (this.list_items[i].title, 5, pos);
            }
        }
    }
}

我知道必须有更好的方法来做到这一点，比如通过 save() 和 transform() 但我无法理解整个想法 - 我只能保存整个 Canvas ，稍微转换一下然后恢复整个 Canvas 。关于这个特定主题的信息和现实生活中的例子也很少见，也许这里有人可以把我推向正确的方向。

Answer 1

您可以尝试加快绘图速度的一件事是:

• 创建另一个 Canvas 元素 (c2)
• 将您的文本呈现给 c2
• 使用您想要的变换在初始 Canvas 中绘制 c2，只需使用 drawImage

drawImage 获取 Canvas 和图像元素。