矩形を描く -『processing.js』
- uto usui
- //
- canvas
- processing.js
processing.jsで矩形を描きます。
矩形を描く
// 線の太さ
strokeWeight(5);
// rect(左上頂点のx座標, 左上頂点のy座標, 幅, 高さ)
rect(30, 100, 100, 180);
// 座標指定を設定する
rectMode(CORNERS);
// rect(左上頂点のx座標, 左上頂点のy座標, 右下頂点のx座標, 右下頂点のy座標)
rect(350, 100, 400, 50);
rectMode(CENTER);
// rect(中心のx座標, 中心のy座標, 幅, 高さ)
rect(200, 150, 100, 100);
rectMode(RADIUS);
// rect(中心のx座標, 中心のy座標, 幅の半分, 高さの半分)
rect(200, 150, 100, 100);
// 塗りつぶさない
noFill();
// 自由に矩形を描く
// quad(x1, y1, x2, y2, x3, y3, x4, y4)
quad(38, 31, 86, 20, 69, 63, 30, 76);