HTML5のcanvsでcubic-bezierのグラフを書く
CSSリファレンスのtransition-timing-functionの解説でcubic-bezierのグラフが必要だったのでHTML5のcanvsを利用して書いてみました。
HTML5のcanvsにはbezierCurveTo()というベジュ曲線を書くためのメソッドが用意されているので簡単に書けます。
変数p1〜p4の値を変更することで任意のcubic-bezierのベジュ曲線を書くことができます。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="320" height="320"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var p1 = 0.25;
var p2 = 0.1;
var p3 = 0.25;
var p4 = 1.0;
//X軸
ctx.beginPath();
ctx.moveTo( 10,310);
ctx.lineTo(310, 310);
ctx.closePath();
ctx.stroke();
//Y軸
ctx.stroke();
ctx.beginPath();
ctx.moveTo(10, 310);
ctx.lineTo(10, 10);
ctx.closePath();
ctx.stroke();
//グラフ
ctx.beginPath();
ctx.moveTo(10, 310);
ctx.bezierCurveTo(p1*300, 310-p2*300, p3*300, 310-p4*300,310, 10);
ctx.stroke();
ctx.closePath();
ctx.strokeStyle = "#CCC"
ctx.fillStyle = "#FFF"
//ハンドラ１
ctx.beginPath();
ctx.moveTo(10,310);
ctx.lineTo(p1*300, 310-p2*300);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.arc(p1*300, 310-p2*300, 5 , Math.PI*2, false)
ctx.closePath();
ctx.fill();
ctx.stroke();
//ハンドラ2
ctx.beginPath();
ctx.moveTo(310, 10);
ctx.lineTo(p3*300, 310-p4*300);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.arc(p3*310, 310-p4*300, 5 , Math.PI*2, false)
ctx.closePath();
ctx.fill();
ctx.stroke();
</script>
</body>
</html>作成されたグラフをキャプチャして補足を追加したのが以下のグラフです。
登録日 : 2013年07月22日 最終更新日 : 2013年8月16日