实时HTML5画布绘制

奥利弗·斯普林(Oliver Spryn)

问题:putImageData()由于已经计算了图像的各个部分,如何实时更新画布?


我正在使用JavaScript / TypeScript应用程序在HTML5<canvas>元素上绘制Mandelbrot集除了数学和细节之外,我的应用程序还可以很好地绘制集合。但是,如果您熟悉可视化设置,则将花费很长时间来绘制。

它将在几秒钟内绘制,但是直到那时,画布完全空白,然后图像出现。我正在寻找一种绘制每行的方法,因为它是使用计算的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()计算每一行后,如何实时更新画布?


非工作代码的最新更新:

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);
}

尝试包装putImageData单个行和计算的setTimeout呼叫异步执行它(后接受编辑:看到这个问题的最终代码,这是不行的,因为iundefinedputImageData排)

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);
    }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

实时复制/克隆HTML5画布

来自分类Dev

实时复制/克隆HTML5画布

来自分类Dev

在背景缩放上绘制HTML5画布

来自分类Dev

RXJS在HTML5画布上绘制线条

来自分类Dev

使用for循环绘制HTML5画布圆

来自分类Dev

无法在html5画布上绘制

来自分类Dev

html5画布绘制多个图像

来自分类Dev

HTML5画布图案绘制延迟

来自分类Dev

在背景缩放上绘制HTML5画布

来自分类Dev

连续绘制HTML5画布

来自分类Dev

HTML5画布-绘制环形扇形

来自分类Dev

html5画布部分绘制

来自分类Dev

禁用html5画布

来自分类Dev

了解HTML5画布

来自分类Dev

禁用html5画布

来自分类Dev

HTML5画布脉动

来自分类Dev

HTML5画布脉动

来自分类Dev

清除画布后未绘制图像(html5画布)

来自分类Dev

HTML5画布使圆圈在画布内闪烁

来自分类Dev

如何使用HTML5画布绘制镜头横截面?

来自分类Dev

查找在HTML5画布中绘制的对象的位置

来自分类Dev

重用HTML5画布的绘制内容的最有效方法

来自分类Dev

在HTML5画布上绘制多个圆的问题

来自分类Dev

在html5画布上绘制多个粒子元素而无需渲染终止

来自分类Dev

在HTML5画布二次曲线上绘制箭头

来自分类Dev

在HTML5画布上绘制多个图像有时不起作用

来自分类Dev

在HTML5画布中的鼠标移动上绘制半透明线

来自分类Dev

如何获取在HTML5画布上绘制的图像的X / Y值?

来自分类Dev

如何使HTML5画布图案fillstyle与绘制的对象一起移动?