Поделитесь плагином, который автоматически падает водные капли, загружайте адрес: https://github.com/foreverjiangting/rainyday.js
Посмотрим, как его использовать? Добавьте следующий код для его запуска.
Эффект заключается в следующем:
Код заключается в следующем:
<! Doctype html> <html> <head> <style> </style> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> </title> <script type = "text/javascript"> runImage () {var> <var> <script type = " image = document.getElementById ("img"); image.src = "4.jpg"; image.onload = function () {// Установить объект дождя var var ingine = new RainyDay ({image: this,}); // вызов функции дождя. Двигатель. Также может быть двигатель. Загрузите перекрестное изображение} </script> </head> <body onload = "runimage ();" > <div> <img src = "4.jpg" id = "img"> </div> <script type = "text/javascript" src = "rainy.js"> </script> </body> </html>Давайте изучим часть кода Rainy.js ниже. Смотрите исходный код в GitHub выше:
Raindyday.prototype.rain = function (presets, speed) {// Подготовка Canvas для отображения Drop if (this.reflection! == this.reflect_none) {this.preparereflections ();} this.animatedrops (); // animation this.presets = presets; this.private_gravity_force_cactors = (это. 0,001)/ 25; this.private_gravity_force_factor_x = ((math.pi/ 2) - this.options.gravityAngle) * (this.options.fps * 0,001)/ 50; // Модель для подготовки к падению, если (это. 0; i <presets.length; Math.ceil (this.canvas.width / maxdropradius); var mhi = math.ceil (this.canvas.height / maxdropradius); this.matrix = new CollisionMatrix (mwi, mhi, maxdropradius);} else {this.options.enablecollies = false; presets.length; this.canvas.getContext ('2d'); context.clearrect (0, 0, this.canvas.width, this.canvas.height); context.drawimage (this.background, 0, 0, this.canvas.width, это. i ++) {if (presets [i] [2]> 1 || presets [i] [3] === -1) {if (presets [i] [3]! == 0) {presets [i] [3]-; for (var y = 0; y <presets [i] [2]; ++ y) {this.putdrop (new drop. Math.random () * this.canvas.height, presets [i] [0], presets [i] [1]));}} else if (math.random () <presets [i] [2]) {preset = prisets [i];}}} if (preset) {this.putdrop (new drop (this, this, this. Math.random () * this.canvas.height, preset [0], preset [1]));} context.save (); context.globalalpha = this.opacity; context.drawimage (this.glass, 0, 0, this.canvas.width, это.Здесь я хочу упомянуть вопрос о междоменных ресурсах, image.crossorigin = "jt"; Загрузка междоменных изображений. Вначале я использовал перекрестные снимки, но была проблема, а затем я использовал локальную картину для загрузки, то есть src = "4.jpg", и проблем не было. На самом деле, если вы хотите использовать междоменные изображения, просто добавьте image.crossorigin = "jt" ;; Код.
(Предварительный документ заключается в том, что сервер включает разрешения)
Это включает в себя проблему CORS, давайте посмотрим на: полное имя CORS-это «совместное использование ресурсов по перекрестному происхождению». Это позволяет браузеру проходить сервер кросс-аоригина
Выдача запроса xmlhttprequest преодолевает ограничение того, что Ajax может использоваться только в том же происхождении.
Мы также используем приведенный выше столбец, чтобы просмотреть проблему:
<! Doctype html> <html> <head> <style> </style> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> </title> <script type = "text/javascript"> runImage () {var> <var> <script type = " Image = document.getElementById ("img"); image.onload = function () {// Установить дождевой объект var ingine = new Rainyday ({Image: this,}); Engine.rain ([[4,6,8000]]); // Установить размер дождевой катопии 4,6 8000gine.rain ([[3,3,0,88], [5,5,0,9], [6,2,1]], 100); // Установить время повторения дождевой капли} // Image.crossorigin = "jt"; // Image Image CrossMean. } </script> </head> <body onload = "runimage ();" > <div> <img src = "http://img0.imgtn.bdimg.com/it/u=938096994,3074232342&fm=21&gp=0.jpg" id = "img"> </div> <script type = "text/javascript" src = "rainy.js"> </script> </body> </html>Давайте посмотрим на информацию на консоли отладки:
Примите изображение/png, image/*; q = 0,8,*/*; q = 0,5-accept-uncodiing gzip, deflateaccept-language zh-cn, zh; q = 0,8, en-us; q = 0,5, en; q = 0,3 Кондиция Keep-alivehost img0. Запрос поступает (протокол + доменное имя + порт). Сервер решает, соглашаться ли запрос на основе этого значения. Это не в пределах действия разрешения. Сервер вернет обычный HTTP -ответ. Браузер обнаружил, что информация о заголовке этого ответа не содержит поля-образного сопровождения доступа (для получения подробной информации см. Ниже), поэтому было известно, что произошла ошибка, и, таким образом, была выбрана ошибка, которая была захвачена функцией обратного вызова Onerror Xmlhttprequest. Обратите внимание, что эта ошибка не может быть идентифицирована кодом состояния, потому что код состояния ответа HTTP может быть 200. Get/cors http/1.1origin: http: //api.bob.comhost: api.alice.comaccept-language: en-usconnection: Keep-aliveuser-agent: mozilla/5.0. Пользователь-агент Mozilla/5.0 (Windows NT 6.1; RV: 46.0) Gecko/20100101 Firefox/46.0
Если доменное имя, указанное по происхождению, находится в рамках разрешения, ответ, возвращаемый сервером, будет иметь несколько дополнительных полей заголовка.
Вышеуказанный контент представляет собой плагин, общий редактор для достижения эффекта автоматического падения капель. Надеюсь, тебе понравится!