HTML5 Canvas是否可以在更短的时间内绘制如下图？

Question

我想绘制电场混合图，但下面的代码在Google Chrome浏览器中需要4秒。

我想在我的朋友物理老师班上使用这个数字，但在他学校的计算机房里只有只有IE8机器。

我想让学生自由地收取点数并观看这个数字。

是否可以在更短的时间内绘制以下数字？

canvas = $('canvas')[0]
context = canvas.getContext "2d"
height = canvas.height
width = canvas.width

imagedata = context.createImageData 1, 1
imagedata.width = 1
imagedata.height = 1
imagedata.data[0] = 0
imagedata.data[1] = 0
imagedata.data[2] = 0
imagedata.data[3] = 256

for w in [0...width]
  for h in [0...height]
    C = 150
    r1 = Math.sqrt(Math.pow(200 - w, 2) + Math.pow(240 - h, 2))
    v1 = C / r1 # * Math.pow 1.001, -r
    r2 = Math.sqrt(Math.pow(500 - w, 2) + Math.pow(240 - h, 2))
    v2 = C / 2 / r2 # * Math.pow 1.001, -r
    v = v1 + v2
    if 5 < v and v < 6
      context.putImageData imagedata, w, h
    else if 3 < v and v < 4
      context.putImageData imagedata, w, h
    else if 1 < v and v < 2
      context.putImageData imagedata, w, h

Answer 1

您可能希望使用专门用于执行此类操作的库。

我会看看http://www.nickdiakopoulos.com/2012/05/14/visualization-performance-in-the-browser/

这是一篇非常好的文章，介绍了不同的选项，以及像svg和canvas之间的性能折扣。