直線の描き方
// キャンバスの大きさ size(500, 300); // 直線をなめらかにする smooth(); // 背景色の設定 background(230, 230, 230); // 線の色を設定 stroke(0, 0, 255); // 線の太さを設定 strokeWeight(4); // 線の描画 // 引数：始点のx座標、始点のy座標、終点のx座標、終点のy座標 line(180, 150, 320, 150);
円の描き方
// キャンバスの大きさ size(500, 300); // 直線をなめらかにする smooth(); // 背景色の設定 background(230, 230, 230); // キャンバスの中心位置を取得 float x = width/2; float y = height/2; // 線の色の設定 stroke(0, 0, 250); // 線の太さの設定 strokeWeight(3); // 円の色と透明度の設定 fill(255, 150); // 円の描画 // 引数：中心点のx座標、中心点のy座標、幅、高さ ellipse(x, y, 50, 150);
円と線を重ねる
ソース上から順に実行されるため、あとに実行された方が描画順が上になる。
線が円より上の場合
// キャンバスの大きさ size(500, 300); // 直線をなめらかにする smooth(); // 背景色の設定 background(230, 230, 230); // キャンバスの中心位置を取得 float x = width/2; float y = height/2; // 線の色の設定 stroke(0, 0, 250); // 線の太さの設定 strokeWeight(3); // 円の色と透明度の設定 fill(255, 150); // 円の描画 // 引数：中心点のx座標、中心点のy座標、幅、高さ ellipse(x, y, 50, 150); // 線の描画 line(180, 150, 320, 150);
線が円より下の場合
// キャンバスの大きさ size(500, 300); // 直線をなめらかにする smooth(); // 背景色の設定 background(230, 230, 230); // キャンバスの中心位置を取得 float x = width/2; float y = height/2; // 線の色の設定 stroke(0, 0, 250); // 線の太さの設定 strokeWeight(3); // 線の描画 line(180, 150, 320, 150); // 円の色と透明度の設定 fill(255, 150); // 円の描画 // 引数：中心点のx座標、中心点のy座標、幅、高さ ellipse(x, y, 50, 150);
円と線の設定をそれぞれ設定する
// キャンバスの大きさ size(500, 300); // 直線をなめらかにする smooth(); // 背景色の設定 background(230, 230, 230); // キャンバスの中心位置を取得 float x = width/2; float y = height/2; // 線の色の設定 stroke(0, 0, 250); // 線の太さの設定 strokeWeight(3); // 線の描画 line(180, 150, 320, 150); // 線(円）の色の設定 stroke(255, 0, 0); // 線(円）の太さの設定 strokeWeight(1); // 円の色と透明度の設定 fill(255, 150); // 円の描画 // 引数：中心点のx座標、中心点のy座標、幅、高さ ellipse(x, y, 50, 150);
円の描画について
noFill 塗りつぶしなし
// 線(円）の色の設定 stroke(120, 0, 0); // 線(円）の太さの設定 strokeWeight(1); // 円の塗りつぶしなし noFill(); // 円の描画 // 引数：中心点のx座標、中心点のy座標、幅、高さ ellipse(x, y, 50, 150);
noStroke 輪郭線なし
// 輪郭線(円）なし noStroke(); // 円の設定 fill(130, 230, 230, 255); // 円の描画 // 引数：中心点のx座標、中心点のy座標、幅、高さ ellipse(x, y, 50, 150);
