サイト内検索

quadraticCurveTo() メソッド(補助線入り)

実行結果

コード

ctx.beginPath();
ctx.moveTo(10, 10);
ctx.quadraticCurveTo(50, 90, 90, 10);
ctx.stroke();
/* 補助線 */
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(50, 90);
ctx.lineTo(90, 10);
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.stroke();
/* 制御点 */
ctx.beginPath();
ctx.arc(50, 90, 3, 0, Math.PI*2, false);
ctx.fillStyle = "rgb(0,0,255)";
ctx.fill();
/* 始点 */
ctx.beginPath();
ctx.arc(10, 10, 3, 0, Math.PI*2, false);
ctx.fillStyle = "rgb(0,150,0)";
ctx.fill();
/* 終点 */
ctx.beginPath();
ctx.arc(90, 10, 3, 0, Math.PI*2, false);
ctx.fillStyle = "rgb(150,0,150)";
ctx.fill();