HTML5 Canvas 实时绘图

Question

问题：如何让putImageData()实时更新canvas，因为图像的各个部分已经计算完毕？

我正在开发一个 JavaScript/TypeScript 应用程序，用于在 HTML5 <canvas> 元素上绘制 Mandelbrot 集。撇开数学和细节不谈，我的应用程序可以很好地绘制集合。但是，如果您熟悉可视化集合，就会知道绘制可能需要很长时间。

它会在几秒钟后绘制，但在此之前，canvas 完全空白，然后图像出现。我正在寻找一种方法来绘制使用 putImageData() 计算的每一行。这是我正在尝试的：

// part of the class definition
private Context: CanvasRenderingContext2D;
private ImageData: ImageData;
private Pixels: number[];

constructor() {
    var c: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("can");

    this.Context = c.getContext("2d");
    this.ImageData = this.Context.createImageData(this.Size.Width, 1);
    this.Pixels = this.ImageData.data;
}

public draw() {
    // tried this... does not help
    // var handler = function(m: Mandelbrot) {
    //    m.Context.putImageData(m.ImageData, 0, i)
    // };

    for(var i: number = 0; i < this.Size.Height; ++i) {    // Loop over each row
        for(var j: number = 0; j < this.Size.Width; ++j) { // Calc px. for one row
            // all the math to compute the set... (works)

            this.setPixelColor(j, color); // sets a color in this.Pixels (works)
        }

        // setTimeout(handler(this), 0); // does not help
        this.Context.putImageData(this.ImageData, 0, i); // Draw the row on the canvas?
    }
}

不知何故，putImageData() 函数在计算完图像中的一行后调用，它仅在生成整个图像后才显示图像。

如何让 putImageData() 实时更新 canvas，因为每一行都已计算？

非工作代码的最新更新：

var handler = function(m: Mandelbrot, i: number) {
    for (var j: number = 0; j < m.Size.Width; ++j) {
        // math

        m.setPixelColor(j, color);
    }

    m.Context.putImageData(m.ImageData, 0, i);
};

var that: Mandelbrot = this;

for(var i: number = 0; i < this.Size.Height; ++i) {
    setTimeout(function() {
        handler(that, i)
    }, 0);
}

工作代码，感谢 ekuusela：

var handler = function(m: Mandelbrot, i: number) {
    return function() {
        for (var j: number = 0; j < m.Size.Width; ++j) {
            // math

            m.setPixelColor(j, color);
        }

        m.Context.putImageData(m.ImageData, 0, i);
    }
};

for(var i: number = 0; i < this.Size.Height; ++i) {
    setTimeout(handler(this, i), 0);
}

Answer 1

尝试将 putImageData 和单行计算包装到 setTimeout 调用以异步执行它（post 接受编辑：查看问题中的最终代码，这赢了无法工作，因为 i 将在 putImageData 行中成为 undefined）

public draw() {
    var that = this;
    var drawRow = function() {
            for(var j: number = 0; j < that.Size.Width; ++j) { // Calc px. for one row
                that.setPixelColor(j, color); // sets a color in this.Pixels (works)
            }

            // TODO specify the dirty region in this call
            that.Context.putImageData(that.ImageData, 0, i); // Draw the row on the canvas?
        };
    for(var i: number = 0; i < this.Size.Height; ++i) {    // Loop over each row
        setTimeout(drawRow, 0);
    }
}

HTML5 Canvas 实时绘图

HTML5 Canvas Drawing in Real Time

html

javascript

canvas

typescript