HTML5帆布实时绘图
HTML5帆布实时绘图
提问于 2015-04-19 17:03:07
问题：如何使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);
}回答 1
Stack Overflow用户
回答已采纳
发布于 2015-04-19 17:07:50
尝试将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);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29732995
复制相关文章
相似问题
腾讯云开发者
