canvas波浪效果的實現代碼

本篇文章給大家帶來的內容是關于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>