hanyeah

最近一直在用h5开发课件，遇到了一些问题。

1、非整数刻度（游标卡尺）

2、动态网格缩放

3、尺寸跨度大

4、任意帧频

我们这里说的h5，特指h5中的canvas。canvas又可以分成2d和webgl。一般来说，webgl能提高渲染效率，能用webgl肯定优先用wengl，但是我们还是分开来看，因为在图形显示效果上还是有区别的。

先看第一个问题：非整数刻度的问题。

物理里边很多器材都需要刻度，而且很多时候，刻度坐标是非整数的，而且，刻度要求是非常严格的，必须准确。游标卡尺就是一个很好地例子，当然不止游标卡尺。

假设精度是0.02mm的游标卡尺，50个格，对应49mm，1mm我们按3px算，平均每个小格间距是49*3/50=2.94mm。

canvas使用矢量图，刻度是不均匀的，如下图，明显能看出来刻度不均匀。

flash矢量图效果就很好。如下图

如果是转位图，效果就更差了，刻度不均匀，再加上模糊。

第二个问题：动态网格缩放的问题。

canvas2d网格缩放效果

flash网格缩放效果

canvas使用位图，缩放效果能好一些，但是网格尺寸是需要动态修改的，使用位图不能满足需求。

webgl效果更差，使用mipmap效果也不好。

第三个问题：尺寸跨度大的问题。

目前遇到最大的器材能到2m。小的器材能到1cm。1mm对应3px的话，最小的30px，最大的6000px。面临这样一个问题：小的看不见，大的图片太大（可以粗略算一算，一个6000*1000的图，占用多少内存，6000*1000*4/1024/1024 = 22.888M）。小的使用2倍图，也比较麻烦，不同尺度下，显示效果也不好。

实际教学中，还面临一个问题，就是后排同学看不清，位图，放大会虚，还是看不清。矢量图就可以无限放大。

比如还是以游标卡尺为例，读数的时候，要能看清下面的刻度和上面的刻度哪个对齐了，要放大到很大才能看清，小了根本看不清，位图模糊了也看不清是不是对齐了。所以还是使用矢量图比较好。

第4个问题：任意帧频

打点计时器一般是50HZ的（因为交流电是50HZ的），浏览器默认刷新频率是60HZ，pixijs中，是按requestAnimationFrame来刷新的，也是60HZ。要实现一秒打50个点就比较困难。

当然我们可以让物理引擎按照自定义的频率来运行，引擎和渲染频率分开。但是事实上并没有那么简单，还需要额外考虑好多东西。人为增加了复杂度。

总结：

我们的课件开发，使用矢量图比位图更有优势。

flash在矢量图渲染上有明显优势，canvas不行。

svg在矢量图渲染上还可以，但是开发难度太高，渲染效率差，BUG太多。

flash可以任意设置帧频也是很大的优势。

flash可视化的界面也很方便。

音频、视频、位图、矢量图、文字，对于多媒体元素的整合，开发中的需求，都可以满足。canvas本身功能单一，需要整个html来解决，功能的整合不那么完美，还有兼容性问题。

flash的弊端：现在浏览器默认不支持，被adobe抛弃，基本算是死了。

很尴尬的是，现在flash死了，但是没有继任者。