如何使用 HTML5 Canvas 制作水波纹效果

Posted 2023-04-23

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用 HTML5 Canvas 制作水波纹效果相关的知识，希望对你有一定的参考价值。

看看flash是怎么做的吧。水波波纹效果有好多种做法，实现难度不一样，效果也不一样。
比如这个
http://bbs.9ria.com/forum.php?mod=viewthread&tid=404246&highlight=%E6%B0%B4%E6%B3%A2
可以在论坛搜一搜，有讲原理的，也有直接贴源码的。用遮罩做比较简单，用柏林噪声做比较难。参考技术A 看看制作程现问题渲染问题放视频视频预览观察啊

canvas 水波纹

<!DOCTYPE html>
<html>
<head>
 <title>水波背景</title>
 <meta charset="gb2312" />
 <style>
 html, body {width:100%; height:100%; padding:0; margin:0;}
 </style>
</head>
<body>
 <canvas id="canvas" style="position:absolute;top:0px;left:0px;z-index:1;"></canvas>
 <script type="text/javascript">
  var canvas = document.getElementById(‘canvas‘); 
  var ctx = canvas.getContext(‘2d‘); 
  canvas.width = canvas.parentNode.offsetWidth; 
  canvas.height = canvas.parentNode.offsetHeight;
  //如果浏览器支持requestAnimFrame则使用requestAnimFrame否则使用setTimeout 
  window.requestAnimFrame = (function(){ 
  return window.requestAnimationFrame  || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame || 
    function( callback ){ 
     window.setTimeout(callback, 1000 / 60); 
    }; 
  })(); 
  // 波浪大小
  var boHeight = canvas.height / 10;
  var posHeight = canvas.height / 1.2;
  //初始角度为0 
  var step = 0; 
  //定义三条不同波浪的颜色 
  var lines = ["rgba(0,222,255, 0.2)", 
      "rgba(157,192,249, 0.2)", 
      "rgba(0,168,255, 0.2)"]; 
  function loop(){ 
   ctx.clearRect(0,0,canvas.width,canvas.height); 
   step++; 
   //画3个不同颜色的矩形 
   for(var j = lines.length - 1; j >= 0; j--) { 
    ctx.fillStyle = lines[j]; 
    //每个矩形的角度都不同，每个之间相差45度 
    var angle = (step+j*50)*Math.PI/180; 
    var deltaHeight = Math.sin(angle) * boHeight;
    var deltaHeightRight = Math.cos(angle) * boHeight; 
    ctx.beginPath();
    ctx.moveTo(0, posHeight+deltaHeight); 
    ctx.bezierCurveTo(canvas.width/2, posHeight+deltaHeight-boHeight, canvas.width / 2, posHeight+deltaHeightRight-boHeight, canvas.width, posHeight+deltaHeightRight); 
    ctx.lineTo(canvas.width, canvas.height); 
    ctx.lineTo(0, canvas.height); 
    ctx.lineTo(0, posHeight+deltaHeight); 
    ctx.closePath(); 
    ctx.fill(); 
   }
   requestAnimFrame(loop);
  } 
  loop(); 
 </script>
</body>

以上是关于如何使用 HTML5 Canvas 制作水波纹效果的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 HTML5 Canvas 制作水波纹效果

canvas水波纹效果

请问怎么用Flash制作水波纹效果，要很具体的，谢谢了

自定义控件三部曲之绘图篇(二十)——RadialGradient与水波纹按钮效果

水波纹的动态效果