HTML5 캔버스에서 두 텍스트 객체 사이에 2 차 곡선을 그리는 방법은 무엇입니까?

Question

과목 별 목표.

코드 싹둑 :

var canvas= document.getElementById('myCanvas'); 
var ctx= canvas.getContext('2d'); 
canvas.width= 520; 
canvas.height= 405; 
ctx.font = "15pt Verdana"; 
ctx.lineWidth = 1; 

// text 1 
ctx.fillText("me and my dog puddie", 210, 90); 
// text 2 
ctx.fillText("you and many many crazy nuts", 210, 130); 
// draw a quadratic bezier curved line between the these 2 text blocks 
ctx.strokeStyle = "rgb(65,60,50)"; 
ctx.beginPath(); 
ctx.moveTo(210,100); 
ctx.bezierCurve(230,250,130,160,160,100); 
ctx.stroke(); 

/* outcome: 
no line were drawn between these two text objects 
*/ 

나는 이차 곡선

Answer 1

변경 라인

ctx.bezierCurve(230,250,130,160,160,100); 

ctx.bezierCurveTo(230,250,130,160,160,100); 

하고 말아야

의 매우 제한된 이해를 d 잘 가라.

Answer 2

입체 곡선의 경우 quadraticCurveTo을 사용하고, 보조 곡선의 경우 bezierCurveTo을 사용해야합니다.

ctx.beginPath(); 
ctx.moveTo(210,100); // move to the start 
ctx.quadraticCurveTo(230, 130, 160, 100); // draw quadractic curve 
ctx.stroke(); 

캔버스 자습서의 Bezier and quadratic curves을 참조하십시오.