如何使用 HTML5 Canvas 制作水波纹效果
发布网友
发布时间：2022-04-06 10:24
共3个回答
懂视网
时间：2022-04-06 14:45
<div class="main clearfix"> <!--3*70=210 2*50=100 310--> <div class="circle"> <!--<div class="box"></div>--> <div class="box-a"></div> <div class="box-b"></div> <div class="box-c"></div> <div class="box-icon icon-a icon-a-1"></div> </div> <!--hr正常灰色 hr-x出错 hr-r正确--> <div class="hr hr-x"></div> <div class="circle"> <!--<div class="box"></div>--> <div class="box-a"></div> <div class="box-b"></div> <div class="box-c"></div> <div class="box-icon icon-b icon-b-2"></div> </div> <div class="hr hr-r"></div> <div class="circle"> <!--<div class="box"></div>--> <div class="box-a"></div> <div class="box-b"></div> <div class="box-c"></div> <div class="box-icon icon-c icon-c-3"></div> </div> </div>
css：
.main{
position: relative;
height:70px;
width: 310px;
margin: 0 auto;
background-color: #f34147;
}
.circle{
position: relative;
float: left;
height:70px;
width: 70px;
}
/*线*/
.hr{
position: relative;
float: left;
width: 50px;
height:70px;
background: url("../images/hr_1.png") no-repeat center center;
background-size: auto 18px;
}
.hr-x{
background: url("../images/hr_2.png") no-repeat center center;
background-size: auto 18px;
}
.hr-r{
background: url("../images/hr_3.png") no-repeat center center;
background-size: auto 18px;
}
/*按钮 大：47 小：39*/
.box-icon{
position: absolute;
z-index: 9999;
top:0;
right:0;
left:0;;
bottom: 0;
width: 70px;
height: 70px;
}
/*小 不亮*/
.icon-a{
background: url("../images/icon_a_3.png") no-repeat center center;
background-size:39px 39px;
}
.icon-b{
background: url("../images/icon_b_3.png") no-repeat center center;
background-size:39px 39px;
}
.icon-c{
background: url("../images/icon_c_3.png") no-repeat center center;
background-size:39px 39px;
}
/*小 亮*/
.icon-a-1{
background: url("../images/icon_a_2.png") no-repeat center center;
background-size:39px 39px;
}
.icon-b-1{
background: url("../images/icon_b_2.png") no-repeat center center;
background-size:39px 39px;
}
.icon-c-1{
background: url("../images/icon_c_2.png") no-repeat center center;
background-size:39px 39px;
}
/*大 亮*/
.icon-a-2{
background: url("../images/icon_a_1.png") no-repeat center center;
background-size:47px 47px;
}
.icon-b-2{
background: url("../images/icon_b_1.png") no-repeat center center;
background-size:47px 47px;
}
.icon-c-2{
background: url("../images/icon_c_1.png") no-repeat center center;
background-size:47px 47px;
}
/*动效*/
@keyframes warn {
0% {
transform: scale(0.6);
opacity: 0;
}
25% {
transform: scale(0.6);
opacity: 0.8;
}
/*50% {*/
/*transform: scale(0.8);*/
/*opacity: 0.4;*/
/*}*/
/*75% {*/
/*transform: scale(0.9);*/
/*opacity: 0.3;*/
/*}*/
100% {
transform: scale(1);
opacity: 0.1;
}
}
@-webkit-keyframes warn {
0% {
-webkit-transform: scale(0);
opacity: 0;
}
25% {
-webkit-transform: scale(0.6);
opacity: 0.8;
}
/*50% {*/
/*-webkit-transform: scale(0.1);*/
/*opacity: 0.3;*/
/*}*/
/*75% {*/
/*-webkit-transform: scale(0.5);*/
/*opacity: 0.5;*/
/*}*/
100% {
-webkit-transform: scale(1);
opacity: 0.1;
}
}
/* 70*70的容器*/
.box{
position: absolute;
width: 70px;
height: 70px;
border: 6px solid rgba(225,225,225,0.5);
-webkit-border-radius:70px;
-moz-border-radius: 70px;
border-radius: 70px;
z-index: 1;
opacity: 0;
-webkit-animation: warn 4s ease-out infinite;
-moz-animation: warn 4s ease-out infinite;
animation: warn 4s ease-out infinite;
}
.box-a{
position: absolute;
width: 70px;
height: 70px;
border: 6px solid rgba(225,225,225,0.5);
-webkit-border-radius:70px;
-moz-border-radius: 70px;
border-radius: 70px;
z-index: 1;
opacity: 0;
-webkit-animation: warn 4s ease-out infinite;
-moz-animation: warn 4s ease-out infinite;
animation: warn 4s ease-out infinite;
animation-delay:1s;
-webkit-animation-delay:1s; /* Safari 和 Chrome */
}
.box-b{
position: absolute;
width: 70px;
height: 70px;
border: 6px solid rgba(225,225,225,0.5);
-webkit-border-radius:70px;
-moz-border-radius: 70px;
border-radius: 70px;
z-index: 1;
opacity: 0;
-webkit-animation: warn 4s ease-out infinite;
-moz-animation: warn 4s ease-out infinite;
animation: warn 4s ease-out infinite;
animation-delay:2s;
-webkit-animation-delay:2s; /* Safari 和 Chrome */
}
.box-c{
position: absolute;
width: 70px;
height: 70px;
border: 6px solid rgba(225,225,225,0.5);
-webkit-border-radius:70px;
-moz-border-radius: 70px;
border-radius: 70px;
z-index: 1;
opacity: 0;
-webkit-animation: warn 4s ease-out infinite;
-moz-animation: warn 4s ease-out infinite;
animation: warn 4s ease-out infinite;
animation-delay:3s;
-webkit-animation-delay:3s; /* Safari 和 Chrome */
}
热心网友
时间：2022-04-06 11:53
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 > <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.getElementById('water'); if (canvas.getContext){ // fps countrt 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 = new Image(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, canvas.getContext('2d'), 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.getElementById('water').getContext('2d'); watereff.pond.update(); watereff.pond.draw(ctx); fps++; }}window.onload = function(){ watereff.init();}
正如你所看到的，这里使用 Vector2D 函数，这个函数在 vector2d.js 里提供了。另一个很难的方法是使用纯数学实现，感兴趣的可以自己实验一下。
热心网友
时间：2022-04-06 13:11
