Html5, svg, canvas에서 부드러운 웨이브를 만드는 방법은 무엇입니까?

Question

html, svg 또는 캔버스에서 4 시간 동안 웨이브를 검색했지만 그림에서와 같이 보이지 않는 내용을 찾지 못했습니다.

어떻게 이런 물결을 만들 수 있습니까? 매끄러운 결말로 그리고 색깔로 채워지 는가?

Answer 1

이 형상 bezierCurveTo() 캔버스를 사용하여 달성 될 수있다. 모양이 SVG에서도 가능할 것이라고 확신합니다. 그러나 익숙하지는 않습니다. 아래는 캔버스 데모입니다.

발췌 문장을 빌려서 MDN 기사에서 수정했습니다. 기본적으로 제어점을 시작점과 끝점과 같은 y 축에 유지하는 베 지어 곡선이 필요합니다. x 축을 따라 제어점을 이동하여 커브를 더 크게 또는 덜 드라마하게 만듭니다. 첫 번째 제어점과 두 번째 제어점이 시작점과 종점 (각각)에 가까울수록 커브가 더 극적으로됩니다.

그래프를 직선을 사용하여 캔버스에 작성하고 그 사실을 베 지어 곡선으로 적용하여 시작합니다.

var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext('2d'); 
 

 
var hw = 10, ho = hw/2; 
 

 
var x1 = 50, y1 = 20, 
 
    x2 = 230, y2 = 100, 
 
    cp1x = 120, cp1y = 20, 
 
    cp2x = 160, cp2y = 100; 
 
    
 

 
ctx.beginPath(); 
 
ctx.moveTo(x1,y1); 
 
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2); 
 
ctx.stroke(); 
 

 
ctx.fillStyle = 'blue'; 
 
// start point 
 
ctx.fillRect(x1 - ho, y1 - ho, hw, hw); 
 
// end point 
 
ctx.fillRect(x2 - ho, y2 - ho, hw, hw); 
 

 
ctx.fillStyle = 'red'; 
 
// control point one 
 
ctx.fillRect(cp1x - ho, cp1y - ho, hw, hw); 
 
// control point two 
 
ctx.fillRect(cp2x - ho, cp2y - ho, hw, hw);

<canvas id="canvas"></canvas>