見出し画像

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();
}

画像1

コードは、冗長な気もするのですが、とりあえず意図通りになったのでよしとします。

前の四角の時よりは、ちょっとだけかっこいいですよね?(汗)



この記事が気に入ったらサポートをしてみませんか?