Question

我正在为html5 canvas创建文本缓存系统。我需要知道哪个可以提供更好的性能。使用clearRect清除现有画布还是再次创建画布？

编辑：添加了一些代码。

function textBuffer(text, font, fill="white", stroke=false, lw=0) {
    let buffer = document.createElement("canvas");
    let bCtx = buffer.getContext("2d");
    ctx.font = font;
    let d = ctx.measureText(text);
    buffer.width = d.width + lw * 2;
    buffer.height = parseInt(font.replace(/[^0-9]/g, "")) + lw;
    bCtx.font = font;
    bCtx.textBaseline = "top"
    if(stroke) {
        bCtx.lineWidth = lw;
        bCtx.strokeStyle = stroke;
        bCtx.strokeText(text, lw / 2, lw / 2);
    }
    bCtx.fillStyle = fill;
    bCtx.fillText(text, lw / 2, lw / 2);
    return buffer;
}

这是其他使用clearRect而不是再次创建画布的代码。

class Text {
    ...
    render() {
        ctx.font = this.font;
        this.canvas.width = ctx.measureText(this.text).width;
        this.canvas.height = this.fontSize;
        this.ctx.clearRect(this.canvas.width, this.canvas.height);

        this.ctx.textBaseline = "top";
        this.ctx.textAlign = "center";
        this.ctx.font = this.font;
        this.ctx.strokeStyle = this.strokeColor;
        this.ctx.lineWidth = this.lineWidth;
        if(this.strokeColor) {
            this.ctx.strokeText(this.text, 0, 0);
        }
        this.ctx.fillText(this.text, 0, 0);

        return this.canvas;
    }
}

Answer 1

如果您多次使用此方法，则一定要使用第二个版本。

生成新的canvas元素及其上下文将浪费内存，从而迫使Garbage Collector频繁启动，这可能会导致整个应用程序变慢。

但是，由于确实要调整画布的大小，因此请注意，您不需要clearRect调用，它已经很清楚了。

创建一个新的画布VS clearRect

1 个答案: