Canvasで円を透明にしてランダムに散りばめる
Canvas(JavaScript)の勉強をしてます。
「基本の基本」に取り組んでおります。
今回は、円を透明にしてランダムに散りばめてみました。
以前、四角でやりましたが、それの円バージョンです。
四角を円にするだけだと成長していない感じがバレてしまうので、色を付けて、大きさをランダムにし、透明度を設定しました。
function render() {
for (let i = 0; i < 30; i++) {
let x = Math.floor(Math.random() * canvas.width);
let y = Math.floor(Math.random() * canvas.height);
let radius = Math.floor(Math.random() * 100);
drawMaru(x, y, radius, 0, Math.PI * 2);
}
}
function drawMaru(x, y, radius, startRadian, endRadian) {
ctx.beginPath();
ctx.globalAlpha = 0.5;
ctx.arc(x, y, radius, startRadian, endRadian, false);
ctx.closePath();
ctx.fillStyle = 'lightblue';
ctx.fill();
}
コードは、冗長な気もするのですが、とりあえず意図通りになったのでよしとします。
前の四角の時よりは、ちょっとだけかっこいいですよね?(汗)