是否有可能在较短的时间内绘制如下的HTML5画布图？

Question

​

​

我想把画成电场的混合图，但是在Google中，下面的代码需要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和画布之间的性能权衡。