编辑:@Ben,忘记你的问题没有理由的downvotes,并且... 是我的客人!:)
我以前从未编码<canvas>过,非常有趣.此时,没有双线性插值.我可能会重做它并添加更多的铃声和口哨声.
如果你想在javascript中实现这样的效果,你将有效地使用<canvas>标签.
原理在于预先计算缓冲区中的失真函数,该函数大于源图像维度.
看一下旧的Flipcode Art of Demomaking专栏:Bitmap Distortion.这是一个很好的老宝石:)尽管有关缓存的段落可能与<canvas>基础实现无关.
有很多处理资源,所以看看Processing.js也是个好主意.