円を描く -『processing.js』
- uto usui
- //
- canvas
- processing.js
processing.jsで円を描きます。
円を描く
// 円を描く
// ellipse(x, y, w, h)
ellipse(100, 100, 100, 50);
// 塗り潰さない
noFill();
// 座標指定の設定
ellipseMode(CENTER);
// ellipse(中心のx座標, 中心のy座標, 横直径, 縦直径) >> デフォルト
ellipse(200, 150, 50, 50);
ellipseMode(RADIUS);
// ellipse(中心のx座標, 中心のy座標, 横半径, 縦半径)
ellipse(200, 150, 50, 50);
ellipseMode(CORNER);
// ellipse(ボックス左上頂点のx座標, ボックスの左上頂点のy座標, 横直径, 縦直径)
ellipse(100, 200, 100, 100);
ellipseMode(CORNERS);
// ellipse(ボックスの左上頂点のx座標, ボックスの左上頂点のy座標, ボックスの右下頂点のx座標, ボックスの右下頂点のy座標)
ellipse(0, 200, 100, 300);