http://www.kitakata-kanko.jp/wp/wp-content/themes/gaia_tcd102/js/wave.js?ver=1773721344

1document.addEventListener('DOMContentLoaded', function() {
2
3  var unit = 100;
4  var info = { seconds : 0, t : 0 }
5  var canvasList = [];
6  var colorList = [];
7  var waveType = [];
8  
9  // 波の要素取得
10  var waves = document.querySelectorAll('.js-wave');
11  if(waves.length > 0){
12    for (let wave of waves) {
13      canvasList[wave.id] = wave;
14      colorList[wave.id] = [wave.getAttribute( 'data-bg-color' )];
15      waveType[wave.id] = wave.getAttribute( 'data-wave-type' );
16    }
17  }
18
19
20  for( var canvasIndex in canvasList ) {
21
22    // canvas要素の取得
23    var canvas = canvasList[canvasIndex];
24
25    // canvas要素にwidthとheightを追加
26    canvas.width = document.documentElement.clientWidth;
27    canvas.width *= devicePixelRatio;
28    canvas.height = 100;//波の高さ
29    canvas.height *= devicePixelRatio;
30
31    // 2Dグラフィックを描画するためのメソッドやプロパティをもつオブジェクトを取得
32    // contextCacheに持たせる
33    canvas.contextCache = canvas.getContext("2d");
34
35  }
36
37  waveUpdate();
38
39  function waveUpdate() {
40
41    for(var canvasIndex in canvasList) {
42
43      // canvas要素の取得
44      var canvas = canvasList[canvasIndex];
45
46      if( waveType[canvasIndex] == 'type2' ){
47
48        if( info.seconds == 0 ){
49          // 各キャンバスの描画
50          draw(canvas, colorList[canvasIndex]);
51        }
52
53      }else{
54        // 各キャンバスの描画
55        draw(canvas, colorList[canvasIndex]);
56      }
57    
58    }
59
60    info.seconds = info.seconds + .014;
61    info.t = info.seconds*Math.PI;
62
63    // 自身の再起呼び出し
64    setTimeout( waveUpdate, 15 );
65
66  }
67
68  // 波を描く（更新時のみ使用）
69  function draw(canvas, color) {
70    var context = canvas.contextCache;
71    context.clearRect(0, 0, canvas.width, canvas.height);
72    //波を描画 drawWave(canvas, color[数字（波の数を0から数えて指定）], 透過, 波の幅のzoom,波の開始位置の遅れ )
73    var zoom = window.matchMedia('(max-width: 767px)').matches ? 2.5 : 5;
74    drawWave( canvas, color[0], 1, zoom, 0 );
75  }
76
77  /**
78  * 波を描画
79  * drawWave(色, 不透明度, 波の幅のzoom, 波の開始位置の遅れ)
80  */
81  function drawWave(canvas, color, alpha, zoom, delay) {
82    var context = canvas.contextCache;
83    context.fillStyle = color;
84    context.globalAlpha = alpha;
85    context.beginPath();
86    drawSine(canvas, info.t / 2, zoom, delay);
87    context.lineTo(canvas.width + 10, canvas.height);
88    context.lineTo(0, canvas.height);
89    context.closePath();
90    context.fill();
91  }
92
93  /**
94   * 
95   * drawSine(時間, 波の幅のzoom, 波の開始位置の遅れ)
96   */
97  function drawSine(canvas, t, zoom, delay) {
98    var xAxis = Math.floor(canvas.height/2);
99    var yAxis = 0;
100    var context = canvas.contextCache;
101    var x = t;
102    var y = Math.sin(x) / zoom;
103    context.moveTo(yAxis, unit*y+xAxis);
104    for (i = yAxis; i <= canvas.width + 10; i += 10) {
105      x = t+(-yAxis+i)/unit/zoom;
106      y = Math.sin(x - delay)/3;
107      context.lineTo(i, unit*y+xAxis);
108    }
109  }
110
111
112});