Question

我最近一直在玩帆布。现在我正在尝试构建一个小的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（），但是我无法绕过整个想法 - 我只能保存整个画布，转换它并恢复整个画布。关于这个特定主题的信息和现实例子也很少见，也许这里的某些人可以把我推向正确的方向。

Answer 1

你可以尝试加速绘画的一件事是：

创建另一个画布元素（c2）
将文字渲染为c2
使用您想要的转换在初始画布中绘制c2，只需使用drawImage

drawImage采用画布和图像元素。

Answer 2

好的，我想我明白了。 HTML5画布使用一种称为“立即模式”的技术进行绘制，这意味着屏幕应该不断重绘。首先听起来奇怪（和慢）的东西实际上是像GPU加速这样的东西的一大优势，它也是在opengl或sdl中发现的一种非常常见的技术。这里有更多信息： http://www.8bitrocket.com/2010/5/15/HTML-5-Canvas-Creating-Gaudy-Text-Animations-Just-Like-Flash-sort-of/

因此，重新绘制每一帧中的每个标签是完全可以的，我猜。

关于javascript-canvas对象的问题（保存，转换，恢复）

2 个答案: