Я пытаюсь создать подобный эффект, как показано здесь:
http://timothypoon.com/blog/2011/01/19/html5-canvas-particle-animation/
Однако я не могу заставить это работать на моей странице, и я хотел бы применить этот эффект в div, содержащем изображение. Возможно ли это или все должно происходить на холсте?
Когда я пытаюсь воссоздать эффект, описанный в руководстве, я получаю много ошибок, таких как неопределенные переменные и т. д.
Вы можете воссоздать это с помощью Canvas, или с помощью преобразований CSS и теней, или их комбинации. Что касается неопределенных переменных, я не могу помочь, поскольку вы не опубликовали свой код.
Чистым подходом было бы делать все на холсте, используя JavaScript. На холст можно нарисовать как траву на переднем плане, так и горы на заднем плане. Однако, если вы хотите частично использовать <div>, вы можете наложить div поверх холста с помощью CSS position:fixed или position:absolute, а также с помощью CSS z-index установить их порядок.
Я рекомендую следующую ссылку, прокрутите вниз для рисования изображения: http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/
Я не знаю, чем еще я могу помочь, так как предоставленный вами учебник довольно хорошо все объясняет. Но если у вас есть дополнительные вопросы, не стесняйтесь комментировать или обновлять свой вопрос.
Вы можете легко использовать механизм протонных частиц для достижения желаемого эффекта. Его API очень прост.http://a-jie.github.io/Proton/
