概要
Path2DはJavaScriptによるWeb APIの一つで、一連のサブパスを保持する。Path2Dの内容は後に一度に描画される。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<body onload="brython(1)"> <canvas id="cvs_main" width="400" height="300" style="border:1px solid #000"></canvas> <!--<script type="text/python" src="test.py"></script>--> <script type="text/javascript"> var canvas = document.getElementById("cvs_main"); if (canvas.getContext) { var context = canvas.getContext("2d"); } path = new Path2D(); path.moveTo(200, 100); path.lineTo(300, 200); path.lineTo(100, 200); path.closePath(); context.stroke(path); </script> </body> |
コンストラクタ
Path2Dのコンストラクタは3種類。
- Path2D()
- 空のPath2Dオブジェクトをつくる。
- Path2D(path)
- 既存のPath2Dオブジェクトを複製する。
- Path2D(d)
- SVGパスの文字列を与えてオブジェクトをつくる。
パスの追加
- addPath(path)
- 現在のパスに
pathを追加する。
パスの操作
- moveTo(x, y)
- (
x, y)の点に移動する。 - lineTo(x, y)
- 現在の点から(x, y)の点まで直線を引く。
- bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
- 現在の点から(x, y)の点までベジエ曲線を描く。
- quadraticCurveTo(cpx, cpy, x, y)
- 現在の点から(x, y)の点まで二次ベジエ曲線を描く。
- arcTo(x1, y1, x2, y2, radius)
- 現在の点から、指定した制御点と半径で円弧を描く。
- arc(
x, y, radius, startAngle, endAngle, anticlockwise) - (x, y)を中心とした半径radiusの円弧を描く。startAndleが開始角、endAngleが終了角で、デフォルトは時計回りだがanticlockwiseをtrueにすると反時計回りに描く。
- ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
- (x, y)を中心とし、x、yの2方向の半径を指定して楕円(弧)を描く。rotationは楕円全体の傾き。その他は
arc()と同じ意味。 - rect(x, y, width, height)
- (x, y)から幅width、高さheightの長方形を描く。