今日は引き続き、JavaScript で実装されたエフェクトの例を紹介します。この記事では、水の波紋エフェクトを実現するための JavaScript の使用方法を紹介します。水の波の効果は背景として画像を使用し、画像上の任意の場所をクリックするとトリガーされます。場合によっては、プレーンな Javascript を使用して興味深いソリューションを作成できることがあります。 ソース コードのダウンロードステップ 1. HTML 前と同様、最初は HTML コードです: コードをコピーしますコードは次のとおりです: ; 水滴エフェクト css/main.css " type="text/css" /> </スクリプト> <br> <スクリプト src="js/waterfall.js" type="text/javascript" charset="utf-8"> <br></head> ;body> <br><div class="example"> <br><h3><a href="#">水滴エフェクト</a></h3> Canvas id="water ">HTML5 準拠のブラウザが必要です</canvas> <br><div id="switcher"> <br><img onclick='watereff.changePicture(this.src);' "data_images/underwater1.jpg" /> <br><img onclick='watereff.changePicture(this.src);' <br /></div> 🎜><div id="fps"></div><br></html> <br>ステップ 2 . CSS<br> <br><br>これは使用される CSS コードです: <br><br><br><br> </div> <br>コードをコピーします<strong></strong><br>コードは次のとおりです:<br><br> <br>body{background:#eee;margin:0;padding:0} <div class="msgheader">.example{background:#FFF;width:600px;border:1px #000 ソリッド;マージン:20px 自動;パディング:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px} <div class="right">#water { <span style="CURSOR: pointer" onclick="copycode(getid('phpcode46'));">width:500px;height:400px; ; <u>ディスプレイ: ブロック; </u>カーソル:ポインター; </span>#switcher { </div>オーバーフロー: 隠し; 🎜>margin:15px; </div>} <div class="msgborder" id="phpcode46">#switcher img { <br>width:160px; <br>height:120px; <br><br><br><br>ステップ 3. JS<br> <br> <br>以下はメインの JavaScript コードです: <br><br><br><br><br><br>コードをコピーします<br><br><br>コードは次のとおりです:<br><div class="msgborder" id="phpcode47"> <br>function drop(x, y, damping, shading, refraction, ctx, screenWidth, screenHeight){ <br>this.x = x; <br>this.y = y; <br>this.shading = shading; <br>this.refraction = refraction; <br>this.bufferSize = this.x * this.y; <br>this.damping = damping; <br>this.background = ctx.getImageData(0, 0, screenWidth, screenHeight).data; <br>this.imageData = ctx.getImageData(0, 0, screenWidth, screenHeight); <br>this.buffer1 = []; <br>this.buffer2 = []; <br>for (var i = 0; i < this.bufferSize; i ){ <br>this.buffer1.push(0); <br>this.buffer2.push(0); <br>} <br>this.update = function(){ <br>for (var i = this.x 1, x = 1; i < this.bufferSize - this.x; i , x ){ <br>if ((x < this.x)){ <br>this.buffer2[i] = ((this.buffer1[i - 1] this.buffer1[i 1] this.buffer1[i - this.x] this.buffer1[i this.x]) / 2) - this.buffer2[i]; <br>this.buffer2[i] *= this.damping; <br>} else x = 0; <br>} <br>var temp = this.buffer1; <br>this.buffer1 = this.buffer2; <br>this.buffer2 = temp; <br>} <br>this.draw = function(ctx){ <br>var imageDataArray = this.imageData.data; <br>for (var i = this.x 1, index = (this.x 1) * 4; i < this.bufferSize - (1 this.x); i , index = 4){ <br>var xOffset = ~~(this.buffer1[i - 1] - this.buffer1[i 1]); <br>var yOffset = ~~(this.buffer1[i - this.x] - this.buffer1[i this.x]); <br>var shade = xOffset * this.shading; <br>var texture = index (xOffset * this.refraction yOffset * this.refraction * this.x) * 4; <br>imageDataArray[index] = this.background[texture] shade; <br>imageDataArray[index 1] = this.background[texture 1] shade; <br>imageDataArray[index 2] = 50 this.background[texture 2] shade; <br>} <br>ctx.putImageData(this.imageData, 0, 0); <br>} <br>} <br>var fps = 0; <br>var watereff = { <br>// variables <br>timeStep : 20, <br>refractions : 2, <br>shading : 3, <br>damping : 0.99, <br>screenWidth : 500, <br>screenHeight : 400, <br>pond : null, <br>textureImg : null, <br>interval : null, <br>backgroundURL : 'data_images/underwater1.jpg', <br>// initialization <br>init : function() { <br>var canvas = document.getElementById('water'); <br>if (canvas.getContext){ <br>// fps countrt <br>fps = 0; <br>setInterval(function() { <br>document.getElementById('fps').innerHTML = fps / 2 ' FPS'; <br>fps = 0; <br>}, 2000); <br>canvas.onmousedown = function(e) { <br>var mouse = watereff.getMousePosition(e).sub(new vector2d(canvas.offsetLeft, canvas.offsetTop)); <br>watereff.pond.buffer1[mouse.y * watereff.pond.x mouse.x ] = 200; <br>} <br>canvas.onmouseup = function(e) { <br>canvas.onmousemove = null; <br>} <br>canvas.width = this.screenWidth; <br>canvas.height = this.screenHeight; <br>this.textureImg = new Image(256, 256); <br>this.textureImg.src = this.backgroundURL; <br>canvas.getContext('2d').drawImage(this.textureImg, 0, 0); <br>this.pond = new drop( <br>this.screenWidth, <br>this.screenHeight, <br>this.damping, <br>this.shading, <br>this.refractions, <br>canvas.getContext('2d'), <br>this.screenWidth, this.screenHeight <br>); <br>if (this.interval != null){ <br>clearInterval(this.interval); <br>} <br>this.interval = setInterval(watereff.run, this.timeStep); <br>} <br>}, <br>// change image func <br>changePicture : function(url){ <br>this.backgroundURL = url; <br>this.init(); <br>}, <br>// get mouse position func <br>getMousePosition : function(e){ <br>if (!e){ <br>var e = window.event; <br>} <br>if (e.pageX || e.pageY){ <br>return new vector2d(e.pageX, e.pageY); <br>} else if (e.clientX || e.clientY){ <br>return new vector2d(e.clientX, e.clientY); <br>} <br>}, <br>// loop drawing <br>run : function(){ <br>var ctx = document.getElementById('water').getContext('2d'); <br>watereff.pond.update(); <br>watereff.pond.draw(ctx); <br>fps ; <br>} <br>} <br>window.onload = function(){ <br>watereff.init(); <br>} <br> </div> <br>正如你所看到的，这里使用 Vector2D 函数，这个函数在 vector2d.js 里提供了。另一个很难的方法是使用纯数学实现，感兴趣的可以自己实验一下。</div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
