使用 HTML5 Canvas 网站制作水波纹效果点击图片就会_首席湖北武汉网页设计tel:027-87844232,湖北武汉低价格网页制作,网页制作报价,武汉网站建设,网页设计报价|武汉专业公司建网站|武汉做网站的公司|武汉便宜网站|武汉网络公司|武汉专业做网站|创新的设计理念,为您量身打造专业企业网站|武汉建网站|律师办公自动化系统,资深的电子商务专家,为您提供全方位的网站建设、网络应用系统解决方案!|大学网站建设|高校网站建设|大学网站制作|高校网站制作|大学网页设计|大学网站设计|高校网页设计|学院网站制作|实验室网站制作|教学网站制作|做网站多少钱?|网站建设多少钱? 
您所在位置网站首页 > 网站营销 >

使用 HTML5 Canvas 网站制作水波纹效果点击图片就会

时间:2019-05-11 09:31来源:武汉网站建设网页设计制作中心 点击:

源码下载


Step 1. HTML


和以前一样,首先是 HTML 代码:

 


复制代码代码如下:


 <!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset=utf-8 /> 
 <title>Water drops effect</title> 
 <link rel=stylesheet href=css/main.css type=text/css /> 
 <script src=js/vector2d.js type=text/javascript charset=utf-8></script> 
 <script src=js/waterfall.js type=text/javascript charset=utf-8></script> 
 </head> 
 <body> 
 <div class=example> 
 <h3><a href=#>Water drops effect</a></h3> 
 <canvas id=water>HTML5 compliant browser required</canvas> 
 <div id=switcher> 
 <img onclick=watereff.changePicture(this.src); src=data_images/underwater1.jpg /> 
 <img onclick=watereff.changePicture(this.src); src=data_images/underwater2.jpg /> 
 </div> 
 <div id=fps></div> 
 </div> 
 </body> 
 </html> 


Step 2. CSS


这是用到的 CSS 代码:


复制代码代码如下:


body{background:#eee;margin:0;padding:0} 
 .example{background:#FFF;width: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 代码:


复制代码代码如下:


function drop(x, y, damping, shading, refraction, ctx, screenWidth, screenHeight){ 
 this.x = x; 
 this.y = y; 
 this.shading = shading; 
 this.refraction = refraction; 
 this.bufferSize = this.x * this.y; 
 this.damping = 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.bufferSize; i++){ 
 this.buffer1.push(0); 
 this.buffer2.push(0); 
 } 
 this.update = function(){ 
 for (var i = this.x + 1, x = 1; i < this.bufferSize - this.x; i++, x++){ 
 if ((x < this.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; 
 } else x = 0; 
 } 
 var temp = this.buffer1; 
 this.buffer1 = this.buffer2; 
 this.buffer2 = temp; 
 } 
 this.draw = function(ctx){ 
 var imageDataArray = this.imageData.data; 
 for (var i = this.x + 1, index = (this.x + 1) * 4; i < this.bufferSize - (1 + this.x); i++, index += 4){ 
 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 texture = index + (xOffset * this.refraction + yOffset * this.refraction * this.x) * 4; 
 imageDataArray[index] = this.background[texture] + shade; 
 imageDataArray[index + 1] = this.background[texture + 1] + shade; 
 imageDataArray[index + 2] = 50 + this.background[texture + 2] + shade; 
 } 
 ctx.putImageData(this.imageData, 0, 0); 
 } 
 } 
 var fps = 0; 
 var watereff = { 
 // variables 
 timeStep : 20, 
 refractions : 2, 
 shading : 3, 
 damping : 0.99, 
 screenWidth : 500, 
 screenHeight : 400, 
 pond : null, 
 textureImg : null, 
 interval : null, 
 backgroundURL : data_images/underwater1.jpg, 
 // initialization 
 init : function() { 
 var canvas = document.getElementByIdwater); 
 if (canvas.getContext){ 
 // fps countrt 
 fps = 0; 
 setInterval(function() { 
 document.getElementByIdfps).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 = new Image(256, 256); 
 this.textureImg.src = this.backgroundURL; 
 canvas.getContext2d).drawImage(this.textureImg, 0, 0); 
 this.pond = new drop( 
 this.screenWidth, 
 this.screenHeight, 
 this.damping, 
 this.shading, 
 this.refractions, 
 canvas.getContext2d), 
 this.screenWidth, this.screenHeight 
 ); 
 if (this.interval != null){ 
 clearInterval(this.interval); 
 } 
 this.interval = setInterval(watereff.run, this.timeStep); 
 } 
 }, 
 // change image func 
 changePicture : function(url){ 
 this.backgroundURL = url; 
 this.init(); 
 }, 
 // get mouse position func 
 getMousePosition : function(e){ 
 if (!e){ 
 var e = window.event; 
 } 
 if (e.pageX || e.pageY){ 
 return new vector2d(e.pageX, e.pageY); 
 } else if (e.clientX || e.clientY){ 
 return new vector2d(e.clientX, e.clientY); 
 } 
 }, 
 // loop drawing 
 run : function(){ 
 var ctx = document.getElementByIdwater).getContext2d); 
 watereff.pond.update(); 
 watereff.pond.draw(ctx); 
 fps++; 
 } 
 } 
 window.onload = function(){ 
 watereff.init(); 
 }

 

正如你所看到的,这里使用 Vector2D 函数,这个函数在 vector2d.js 里提供了。另一个很难的方法是使用纯数学实现,感兴趣的可以自己实验一下。 

(整理收集:武汉百思特科技有限公司网站建设设计制作中心)


分享到:
  • 市场部 在线咨询
  • 技术部 在线咨询
  • 售后部 在线咨询

点击排行

微信客服号