EDIT: @Ben, forget about the downvotes for no reason on your question, and... BE MY GUEST! :)
I never coded with <canvas> before, it was very fun. At this point, there is no bilinear interpolation. I might rework it and add more bells and whistles.
If you want to achieve such an effect in javascript, you'll effectively have to use the <canvas> tag.
The principle consists in precalculating a distortion function in a buffer that is larger than the source image dimension.
发布评论
评论(2)
编辑:@Ben,忘记对你的问题无缘无故的否决票,并且... 成为我的客人! :)
我以前从未使用
编写过代码,这非常有趣。此时,不存在双线性插值。我可能会重新设计它并添加更多花哨的东西。
如果您想在 javascript 中实现这样的效果,您实际上必须使用
标记。
其原理在于在大于源图像尺寸的缓冲区中预先计算失真函数。
看看旧的 Flipcode 演示制作艺术专栏:位图扭曲。这是一个很好的老宝石:) 不过,关于缓存的段落可能与基于
的实现无关。
有许多处理资源,因此查看Processing.js。
EDIT: @Ben, forget about the downvotes for no reason on your question, and... BE MY GUEST! :)
I never coded with
<canvas>
before, it was very fun. At this point, there is no bilinear interpolation. I might rework it and add more bells and whistles.If you want to achieve such an effect in javascript, you'll effectively have to use the
<canvas>
tag.The principle consists in precalculating a distortion function in a buffer that is larger than the source image dimension.
Have a look at the old Flipcode Art of Demomaking column: Bitmap Distortion. This is a good old gem :) The paragraph about the cache might not be relevant for a
<canvas>
based implementation though.There are many Processing resources out there, so it's also a good idea to have a look at Processing.js.
为了互联网的利益,请不要这样做。
Please, for the sake of the internet, don't do it.