canvas学習ノート-長方形とパスを描く(一)
1049 ワード
2.長方形 canvas 他のすべてのグラフィックの描画には、少なくとも1つのパスを生成する必要があります.
長方形の描画方法:
長方形の例
3.経路
グラフィックの基本要素はパスです.パスはポイントの集合です.パスを使用してグラフィックを描画するには、次のようにします. 1. 2. 3. 4. .
パスペイントの一般的な方法
： . 長方形の描画方法:
//
fillRect(x, y, width, height);
//
strokeRect(x, y, width, height);
// ， 。
clearRect(x, y, width, height);長方形の例
3.経路
グラフィックの基本要素はパスです.パスはポイントの集合です.パスを使用してグラフィックを描画するには、次のようにします.
beginPath()新しいパス(パス開始点を作成する必要がある場合がある)lineTo,arc,rect等の描画経路closePath閉鎖経路(実際のニーズに応じて)stroke fill描画または塗りつぶし(パスはこのステップがない、グラフィックは表示されない)パスペイントの一般的な方法
//
lineTo(x, y)
//
rect(x, y, width, height)
//
arc(x, y, radius, startAngle, endAngle, anticlockwise)
// (chrome37+)
ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
//
quadraticCurveTo(cp1x, cp1y, x, y)
//
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
// Path2D(chrome36+, addPath chrome68+)
new Path2D(path);