canvas波浪效果的实现代码

基于canvas的三次贝塞尔曲线(bezierCurveTo)

<canvas id="myCanvas"></canvas>  <script>     var WAVE_HEIGHT = 200 //波浪变化高度     var SCALE = 0.5 // 绘制速率     var CYCLE = 360 / SCALE     var TIME = 0      function initCanvas() {         var c = document.getElementById("myCanvas")         var width = window.screen.width         var height = window.screen.height          var ctx = c.getContext("2d")         c.width = width         c.height = height          // start         window.requestAnimationFrame(function() {             draw(ctx, width, height)         })     }      function draw(ctx, width, height) {         ctx.clearRect(0, 0, width, height)          TIME = (TIME   1) % CYCLE         var angle = SCALE * TIME // 当前正弦角度         var dAngle = 60 // 两个波峰相差的角度          ctx.beginPath()         ctx.moveTo(0, height * 0.5   distance(WAVE_HEIGHT, angle, 0))         ctx.bezierCurveTo(             width * 0.4,             height * 0.5   distance(WAVE_HEIGHT, angle, dAngle),             width * 0.6,             height * 0.5   distance(WAVE_HEIGHT, angle, 2 * dAngle),             width,             height * 0.5   distance(WAVE_HEIGHT, angle, 3 * dAngle)         )         ctx.strokeStyle = "#ff0000"         ctx.stroke()          ctx.beginPath()         ctx.moveTo(0, height * 0.5   distance(WAVE_HEIGHT, angle, -30))         ctx.bezierCurveTo(             width * 0.3,             height * 0.5   distance(WAVE_HEIGHT, angle, dAngle - 30),             width * 0.7,             height * 0.5   distance(WAVE_HEIGHT, angle, 2 * dAngle - 30),             width,             height * 0.5   distance(WAVE_HEIGHT, angle, 3 * dAngle - 30)         )         ctx.strokeStyle = "#0000ff"         ctx.stroke()          function distance(height, currAngle, diffAngle) {             return height * Math.cos((((currAngle - diffAngle) % 360) * Math.PI) / 180)         }          // animate         window.requestAnimationFrame(function() {             draw(ctx, width, height)         })     }      initCanvas() </script>

以上就是canvas波浪效果的实现代码的详细内容，更多请关注教程集其它相关文章！

本文转载自PHP中文网

您可能感兴趣的文章：
canvas波浪效果的实现代码
Canvas实现波浪进度图（附demo）
分享一个利用HTML5制作的海浪效果代码
利用Canvas模仿百度贴吧客户端loading小球的方法
什么是canvas离屏技术？canvas放大镜效果如何实现？
HTML5实现留言和回复的页面样式
canvas渐变色：canvas如何实现渐变色的效果？
canvas离屏技术与放大镜实现代码示例
利用SurfaceView实现下雨与下雪动画的效果
photoshop画出完美圆弧的波浪线边框教程分享