使用 HTML5 Canvas 製作水波紋效果點圖就會觸發_html5教學技巧

今天，我們繼續分享 JavaScript 實作的效果例子，這篇文章會介紹使用 JavaScript 實作水波紋效果。水波效果以圖片為背景，點擊圖片任一位置都會觸發。有時候，我們使用普通的 Javascript 就可以創造一個很有趣的解決功能。
 

原始碼下載

Step 1. HTML

跟以前一樣，首先是HTML 程式碼：

複製程式碼

程式碼如下:

Water drops effect

HTML5 compliant browser required

　

Step 2. CSS
這是使用的CSS 程式碼：

程式碼如下:


body{background:#eee;margin:0;padding:0}
.example{background:#FFF;widthpadding:0}
.example{background:#FFF;widththpadding:0}
.example{background:#FFF;widthpadding:0}
.example{background:#FFF;widthpadding:0}
.example{background:#FFF;widthpadding:0}
.example{background:#FFF;widthpadding:0} :600px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}
#water {
width:500px;
height:400px;
display: block;
margin:0px auto;
cursor:pointer;
}
#switcher {
text-align:center; >overflow:hidden;
margin:15px;

}
#switcher img { width:160px; height:120px;
}

Step 3. JS

下面是主要的JavaScript 代碼：

複製代碼程式碼如下:

函數 drop(x, y, 勢, 陰影, 勢, ctx, screenWidth, screenHeight){
this.x = x;
this.y = y;
this.shading = 陰影；
this.refraction = 光線；
this.bufferSize = this.x * this.y;
this.damping = 阻尼；
this.background = ctx.getImageData(0, 0, screenWidth, screenHeight).data;
this.imageData = ctx.getImageData(0, 0, screenWidth, screenHeight);
this.buffer1 = [];
this.buffer2 = [];
for (var i = 0; i this.buffer1.push(0);
this.buffer2.push(0);
}
this.update = function(){
for (var i = this.x 1, x = 1; i if ((x 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];
this.buffer2[i] *= this.damping;
} 否則 x = 0;
}
var temp = this.buffer1;
this.buffer1 = this.buffer2;
this.buffer2 = 暫時；
}
this.draw = function(ctx){
var imageDataArray = this.imageData.data;
for (var i = this.x 1, index = (this.x 1) * 4; i var xOffset = ~~(this.buffer1[i - 1] - this.buffer1[i 1]);
var yOffset = ~~(this.buffer1[i - this.x] - this.buffer1[i this.x]);
var shade = xOffset * this.shading;
var 紋理 = 索引 (xOffset * this.refraction yOffset * this.refraction * this.x) * 4;
imageDataArray[index] = this.background[texture] 光照；
imageDataArray[索引 1] = this.background[紋理 1] 光照；
imageDataArray[索引 2] = 50 this.background [🎜>imageDataArray[索引 2] = 50 this.background[ 221 ] 亮度；
}
ctx.putImageData(this.imageData, 0, 0);
}
}
var fps = 0;
var watereff = {
//變數
時間步長：20，
亮度：2，
亮度：3，
寬度：0.99，
螢幕寬度：500 ，
screenHeight : 400,
池塘: null,
textureImg : null,
interval : null,
backgroundURL : 'data_images/underwater1.jpg', init : function() {
var canvas = document.getElementById('water');
if (canvas.getContext){
// fps 統計
fps = 0;
setInterval(function() {
document.getElementById('fps').innerHTML = fps / 2 ' FPS';
fps = 0;
}, 2000);
canvas.onmousedown = function(e) {
var mouse = watereff.getMousePosition(e).sub(new vector2d(canvas.offsetLeft, canvas.offsetTop));
watereff.pond.buffer1[mouse.y * watereff.pond.x mouse.x] = 200;
}
canvas.onmouseup = function(e) {
canvas.onmousemove = null;
}
canvas.width = this.screenWidth;
canvas.height = this.screenHeight;
this.textureImg = 新圖像(256, 256);
this.textureImg.src = this.backgroundURL;
canvas.getContext('2d').drawImage(this.textureImg, 0, 0);
this.pond = new drop(
this.screenWidth,
this.screenHeight,
this.damping,
this.shading,
this.refractions, getContext('2d'),
this.screenWidth, this.screenHeight
);
if (this.interval != null){
clearInterval(this.interval);
}
this.interval = setInterval(watereff.run, this.timeStep);
}
},
//更改圖片 func
changePicture : function(url){
this.backgroundURL = url;
this.init();
},
//取得滑鼠位置 func
getMousePosition : function(e){
if (!e){
var e = window.event;
}
if (e.pageX || e.pageY){
回傳新的支援2d(e.pageX, e.pageY);
} else if (e.clientX || e.clientY){
回傳新的支援2d(e.clientX, e.clientY);
}
},
// 循環繪圖
run : function(){
var ctx = document.getElementById('water').getContext('2d');
watereff.pond.update();
watereff.pond.draw(ctx);
幀率；
}
}
window.onload = function(){
watereff.init();
}


如你所看到的，這裡使用 Vector2D 函數，這個函數在 vector2d.js 裡提供了。自己實驗一下。