武汉百思特科技--首席湖北武汉网站建设tel:027-87844232|武汉最低价格网站制作|武汉做网站的公司|武汉做网站|武汉网络公司|武汉专业做网站|创新的设计理念,为您量身打造专业企业网站|武汉建网站|武汉网站建设|大学网站建设|高校网站建设|大学网站制作|高校网站制作|大学网页设计|高校网页设计|大学网站设计|电子商务|软件开发|网站制作|学院网站制作|实验室网站制作|教学网站制作|网页制作|武汉企业建站|武汉网站制作公司|武汉网站建设价格|武汉网站公司| 武汉网站建设公司| 武汉网页设计公司| 武汉网页制作| 武汉网络公司网站制作|律师办公自动化系统|民间借贷网站制作|投资担保网站制作|宜昌网页制作|宜昌网站建设|荆州网站建设|荆州网站制作|孝感网页制作|孝感网站建设
新 闻 动 态
·百度小程序的不同之处
·小程序对我们生活的影响
·百度百科微信小程序
·做一个网站需要多少钱?武...
·企业怎么建设营销型网站?
·武汉网站建设怎么做才有效...
·武汉网站建设公司哪家好
·如何提升网站建设的特色?...
·武汉企业网站建设价格是多...
·武汉网站建设:网站建设的...
·网站设计中代码标签该怎么...
·网页设计中脚本设计技巧
·武汉网站设计如何实现简约...
·熊掌号对于网站seo优化...
·哪些操作会导致网站优化过...
·从用户的搜索习惯谈谈我对...
·武汉SEO优化需要不断的...
·使用 HTML5 Can...
·网站买卖需谨慎 掌握四个...
·微信“小程序”来了 你们...
·中小型企业网站建设技巧
·武汉网站建设提供职业的s...
·武汉网站建设公司建站流程
·百度竞价排名前需要做的准...
·针对这些关键词应该采取的...
·个人主页怎么制作网站
·从零开始学网页制作
·企业网站制作流程是网站制...
·网站制作中代码相关知识
·门户网站制作与普通网站的...
更多内容...
·网速测试文档
·企业邮箱使用说明
·GOOGLE竞价合同
·武汉百思特网站维护合同书
·域名注册合同
更多内容...
·网络组建与维护
·WinXP另类垃圾的清理
·硬盘坏道的发现与修复
在 线 咨 询
网站建设,网站推广,上海网站建设,上海网站推广
 

使用 HTML5 Canvas 网站制作水波纹效果点击图片就会触发
2019-05-11

源码下载


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 里提供了。另一个很难的方法是使用纯数学实现,感兴趣的可以自己实验一下。

【打印本页】 【关闭本页】

分享到:


[关于我们] [友情链接] [帮助中心] [代理合作]
 
地址:湖北省武汉市鲁磨路 鄂ICP备11005039号   联系电话:027-87844232 (7*24小时咨询热线):13517268963

我们提供:武汉网站建设武汉网站制作 网站设计及网站维护等服务,立志做武汉最专业的网站建设公司
交换链接QQ:56718151 PR>=4
版权所有:武汉百思特科技