javascript矩阵脚本,由于某种原因效率低下/缓慢

发布于 2024-11-15 12:57:46 字数 315 浏览 2 评论 0原文

我已经编写了一个脚本来实现 JavaScript 中的“矩阵效应”(在后台使用)。我使用了 Canvas 元素,但由于某种原因它有点慢,但我不知道为什么。

矩阵效果:那些从上到下滚动的(绿色)文本行。

脚本: http://dominiquedebrabander.nl/matrix/matrix.js

我已经链接了脚本,'导致它渴望这个文本区域。希望大家知道原因,或者给点建议。

问候,多米尼克

I've made a beginning of a script to achieve the "matrix effect" (to use in the background) in JavaScript. I used the Canvas element, but for some reason its kinda slow but i don't know why.

Matrix effect: Those (green) text lines which are scrolling from top to bottom.

script:
http://dominiquedebrabander.nl/matrix/matrix.js

i've linked the script, 'cause its to long for this textarea. I hope you guys know why, or have some tips.

greetings, Dominique

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

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

发布评论

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

评论(1

乱世争霸 2024-11-22 12:57:46
  • 如果你只是想用黑色填充它,为什么要调用clearRect呢?删除该调用
  • 如果字体从不改变,则不要一遍又一遍地设置字体,只需在开始时设置一次即可。
  • 绘制文本,请参阅我的帖子此处。考虑将每个字母绘制到第二个不可见的画布上,并使用drawImage将该画布的一部分绘制到真实的画布上

如果您确实希望按照现在的方式完成,那么如果将所有内容绘制到屏幕外的大屏幕上,那么速度会快得多画布上,你只需一遍又一遍地绘制单个画布,但这样你就无法让字母以彼此不同的速度落下。如果你这样做,它看起来会更像矩阵,比如把 y 放在 += Math.random()*4.5 (左右)而不是 0.5

  • Why are you calling clearRect if you are just gonna fill it with black? Remove that call
  • Don't set the font over and over if it never changes, just set it once at the start.
  • drawing text is slow, see my post here. Consider painting every letter to a second invisible canvas and using drawImage to draw parts of that canvas to your real canvas

If you really want it to be done the way you are doing it now it will be much faster if you draw everything to a large offscreen canvas and you just draw that single canvas over and over, but then you wouldn't be able to have the letters fall at different speeds from each other. And it would look more matrix-like if you did that, say put the y at += Math.random()*4.5 (or so) instead of 0.5

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