자동으로 물방울이 떨어지는 플러그인을 공유하고 다운로드 주소 : https://github.com/foreverjiangting/rainyday.js
사용 방법을 봅시다. 다음 코드를 추가하여 실행하십시오.
효과는 다음과 같습니다.
코드는 다음과 같습니다.
<! docType html> <html> <head> <style> </style> </style> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <title> </title> <script type = "text/javaScript"> function Runimage () {var image = document.getElementById ( "img"); image.src = "4.jpg"; image.onload = function () {// 비가 오는 객체 설정 var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var. // 비 기능 엔진을 호출하십시오. 또한 엔진 ([[6,8000]]) 일 수 있습니다. 현재 물 액적의 크기는 엔진 ([[3,3,0.88], [5,5,0.9], [6,2,1]], 100); 크로스 도메인 이미지를로드} </script> </head> <body onload = "runimage ();" > <div> <img src = "4.jpg"id = "img"> </div> <script type = "text/javaScript"src = "rainy.js"> </script> </body> </html>아래의 비나무 코드 중 일부를 연구 해 봅시다. 위의 GitHub의 소스 코드를 참조하십시오.
Rainyday.prototype = 함수 (사전 설정, 속도) {// 드롭 매핑을 위해 캔버스를 준비합니다 (this.reflection! == this.reflection_none) {this.prepareReflection ();} this.animatedRops (); // anianmation this.presets = presets; this.private_gravity_force = (this.private_gravity_force. / 25; this.private_gravity_force_factor_x = ((math.pi/ 2) - this.options.gravityangle) * (this.options.fps * 0.001)/ 50; // 낙하를 준비하기위한 모델 (this.options.enablecolliss. presets.length; i ++) {if (presets [i] [0] [0] + 사전 설정 [i] [1]> maxdropradius) {maxdropradius = math.floor (presets [i] [0] + presets [i] [1]);}} if (maxdropradius> 0) {// math mwi = math. maxdropradius); var mhi = math.ceil (this.canvas.height / maxdropradius); this.matrix = new collisionmatrix (mwi, mhi, maxdropradius);} else {this.options.enablecollisions = false;}} (var i = 0; I <presets.l; i) {i) {presets [i] [3] = -1;}} var lastExecutiontime = 0; this.adddropCallback = function () {var timestamp = new Date (). gettime (); if (timestamp -lastExecutionTime <Speed) {return;} lastExecutionTime = timestamp; var context = this.canvas.getContext ( '2d'); context.clearRect (0, 0, this.canvas.width, this.canvas.height); context.DrawImage (this.background, 0, 0, this.canvas.width, this.canvas.height); i ++) {if (사전 설정 [i] [2]> 1 || 사전 설정 [i] [3] === -1) {if (사전 세트 [i] [3]! == 0) {presets [i] [3]-; for (var y = 0; y <the. this.random (this, this, this. math.random () * this.canvas.height, presets [i] [0], 사전 설정 [i] [1]);}} else if (math.random () <presets [i] [2]) {preset = presets [i]; break;}} if (preset) {this.random (this, math.) math.random () * this.canvas.height, preset [0], preset [1]);} context.save (); context.globalalpha = this.opacity; context.drawimage (this.glass, 0, 0, this.canvas.width, this.canvas.height);여기서 나는 크로스 도메인 자원, image.crossorigin = "jt"에 대한 질문을 언급하고 싶습니다. 크로스 도메인 이미지 로딩. 처음에는 크로스 도메인 사진을 사용했지만 문제가 있었는데 로컬 그림을 사용하여로드했습니다 (예 : SRC =”4.JPG”. 실제로, 크로스 도메인 이미지를 사용하려면 이미지를 추가하십시오. crossorigin = "jt";; 코드.
(Pressponse는 서버가 권한을 활성화했다는 것입니다)
여기에는 CORS 문제가 포함됩니다. 브라우저가 서버를 교차로 제공합니다
xmlhttprequest 요청을 발행하면 Ajax가 동일한 원점에서만 사용할 수 있다는 제한을 극복합니다.
또한 위의 열을 사용하여 문제를 봅니다.
<! docType html> <html> <head> <style> </style> </style> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <title> </title> <script type = "text/javaScript"> function Runimage () {var image=document.getElementById("img");image.onload=function(){//Set a rain object var engine=new RainyDay({image:this,});engine.rain([[4,6,8000]]);//Set raindrop size 4,6 The number is 8000engine.rain ([[3,3,0.88], [5,3,0.9], [6,2,1]], 100); // 빗방울 반복 시간을 설정} // image.crossorigin = "jt"; // Cross-Domain image.src = "http://img0.imgtn.bdimg.com/it/u=938096994,3074232342&fm=21&gp=0.jpg"; } </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.5accept-encoding gzip, deflateaceccep-language zh-cn, zh; q = 0.8, en-us; q = 0.5, en; q = 0.3connection img0.imgtn.bdimg.comorigin incor- 요청은 (프로토콜 + 도메인 이름 + 포트)에서 나옵니다. 서버는이 값에 따라 요청에 동의할지 여부를 결정합니다. 허가의 범위 내에 있지 않습니다. 서버는 일반 HTTP 응답을 반환합니다. 브라우저는이 응답의 헤더 정보에 액세스-제어-홀로-오리핀 필드가 포함되어 있지 않다는 것을 발견 했으므로 (자세한 내용은 아래 참조) 오류가 발생하여 오류가 발생하여 xmlhttprequest의 onerror 콜백 함수에 의해 캡처 된 것으로 알려져 있습니다. HTTP 응답의 상태 코드는 200 일 수 있기 때문에이 오류는 상태 코드로 식별 할 수 없습니다. get/cors http/1.1origin : http : //api.bob.comhost : api.alice.comaccept-language : en-usconnection : keep-aliveuser-agent : mozilla/5.0. 사용자 에이전트 모질라/5.0 (Windows NT 6.1; RV : 46.0) Gecko/20100101 Firefox/46.0
Origin에 의해 지정된 도메인 이름이 권한 범위 내에 있으면 서버에서 반환 한 응답에는 여러 헤더 필드가 있습니다.
위의 컨텐츠는 편집자가 공유하는 플러그인으로 자동 액적 액적 낙하 효과를 달성합니다. 나는 당신이 그것을 좋아하기를 바랍니다!