サイト内検索

bezierCurveTo() メソッド(三次曲線)

実行結果

コード

ctx.beginPath();
ctx.moveTo(10, 10);
ctx.bezierCurveTo(30, 90, 70, 10, 90, 90);
ctx.stroke();
/* 補助線1 */
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(30, 90);
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.stroke();
/* 補助線2 */
ctx.beginPath();
ctx.moveTo(70, 10);
ctx.lineTo(90, 90);
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.stroke();
/* 制御点1 */
ctx.beginPath();
ctx.arc(30, 90, 3, 0, Math.PI*2, false);
ctx.fillStyle = "rgb(0,0,255)";
ctx.fill();
/* 制御点2 */
ctx.beginPath();
ctx.arc(70, 10, 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, 90, 3, 0, Math.PI*2, false);
ctx.fillStyle = "rgb(150,0,150)";
ctx.fill();