матричный скрипт javascript, по какой-то причине неэффективный / медленный

Question

Я создал сценарий для достижения «матричного эффекта» (для использования в фоновом режиме) в JavaScript. Я использовал элемент Canvas, но по какой-то причине он довольно медленный, но я не знаю почему.

Эффект матрицы: те (зеленые) строки текста, которые прокручиваются сверху вниз.

Сценарий: http://dominiquedebrabander.nl/matrix/matrix.js

Я связал скрипт, потому что он слишком длинный для этой текстовой области. Надеюсь, вы, ребята, знаете почему или у вас есть несколько советов.

привет, Доминик

Answer 1

• Почему вы звоните clearRect, если вы просто собираетесь заполнить его черным? Удалить этот звонок
• Не устанавливайте шрифт снова и снова, если он никогда не меняется, просто установите его один раз в начале.
• текст для рисования медленно , см. Мой пост здесь . Попробуйте нарисовать каждую букву на втором невидимом холсте и использовать drawImage, чтобы нарисовать части этого холста на вашем реальном холсте

Если вы действительно хотите, чтобы это было сделано так, как вы делаете это сейчас, это будет намного быстрее, если вы рисуете все на большом закадровом холсте и просто рисуете этот холст снова и снова, но тогда вы не будете в состоянии заставить буквы падать на разных скоростях друг от друга. И если бы вы это сделали, это выглядело бы более похожим на матрицу, скажем, поместите y в + = Math.random()*4.5 (или около того) вместо 0.5