HTML5 эффект частиц

Question

Я пытаюсь создать подобный эффект, как показано здесь:

http://timothypoon.com/blog/2011/01/19/html5-canvas-particle-animation/

Однако, я не могу показаться, чтобы получить эту работу на моей странице, и я хотел бы применить этот эффект в div, который содержит изображение. Это возможно или все должно произойти на холсте?

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

Answer 1

Вы можете воссоздать это с помощью Canvas, или с помощью CSS преобразований и тень, или смесь двух. Что касается неопределенных переменных, я не могу помочь, так как вы не разместили свой код.

Чистым подходом было бы сделать все в пределах холста, используя JavaScript. Вы можете нарисовать как переднюю траву, так и фоновые горы на холсте. Однако, если вы хотите частично использовать <div>, вы можете наложить div на верх холста, используя CSS position:fixed или position:absolute, также используя CSS z-index, чтобы указать их порядок.

Я рекомендую следующую ссылку, прокрутите вниз для рисования изображения: http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/

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

Answer 2

Вы можете использовать двигатель частиц протонов, чтобы легко достичь желаемого эффекта, его API очень прост. http://a-jie.github.io/Proton/