1、二次和三次贝塞尔曲线

  1. <style>
  2.     canvas{
  3.         width: 500px;
  4.         height: 300px;
  5.         border: 1px solid;
  6.     }
  7. </style>
  8. </head>
  9. <body>
  10. <canvas id="can" width="500px" height="300px"></canvas>
  11. <script>
  12.    var canvas = document.getElementById("can");
  13.    var ctx = canvas.getContext("2d");
  14.     // 二次贝塞尔曲线
  15.    ctx.beginPath();
  16.    ctx.moveTo(100,100);
  17.    ctx.quadraticCurveTo(200,200,300,100);
  18.    ctx.stroke();
  19. //    三次贝塞尔曲线
  20. ctx.beginPath();
  21.    ctx.moveTo(100,100);
  22.    ctx.quadraticCurveTo(200,200,300,100,400,200);
  23.    ctx.stroke();
  24. </script>
  25. </body>

2、模拟波浪：

  1. <style>
  2.     canvas{
  3.         width: 500px;
  4.         height: 300px;
  5.         border: 1px solid;
  6.     }
  7. </style>
  8. </head>
  9. <body>
  10. <canvas id="can" width="500px" height="300px"></canvas>
  11. <script>
  12.    var width = 500;
  13.    var height = 300;
  14.    var offset = 0;
  15.    var num = 0 ;
  16.    var canvas = document.getElementById("can");
  17.    var ctx = canvas.getContext("2d");
  18.     setInterval(function(){
  19.    ctx.clearRect(0,0,500,300);
  20.    ctx.beginPath();
  21. //    接图型：
  22.    ctx.moveTo(0 + offset -500,height / 2);
  23.    ctx.quadraticCurveTo(width / 4 + offset-500,height / 2 - Math.sin(num) * 120, width / 2 + offset-500,height / 2);
  24.    ctx.quadraticCurveTo(width / 4 * 3 + offset-500,height / 2 + Math.sin(num)* 120, width + offset-500 ,height / 2);
  25.    ctx.moveTo(0 + offset,height / 2);
  26.    ctx.quadraticCurveTo(width / 4 + offset,height / 2 - Math.sin(num)* 120, width / 2 + offset,height / 2);
  27.    ctx.quadraticCurveTo(width / 4 * 3 + offset,height / 2 + Math.sin(num)* 120, width + offset ,height / 2);
  28.    ctx.stroke();
  29.    offset += 1;
  30.    offset %= 500;
  31.    num +=0.02;
  32.     },1000/30);
  33. </script>
  34. </body>