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

Question

我想绘制电场混合图，但下面的代码在谷歌 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 和画布之间的性能权衡的非常好的文章。