在画布上挥动文字

发布于 2024-08-17 13:50:57 字数 130 浏览 5 评论 0原文

如何在画布元素上制作类似于 this 页?

How could I make waving text on a canvas element similar to what is found on this page?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

时光暖心i 2024-08-24 13:50:57

编辑:@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.

计㈡愣 2024-08-24 13:50:57

为了互联网的利​​益,请不要这样做。

Please, for the sake of the internet, don't do it.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文