Canvasでマガジンのヘッダー画像つくり

Canvas（JavaScript）を学習しています。
JavaScriptもほとんどわかっていないので、苦労してます。。

Canvasの記事もたまってきたのでマガジンを作りました。

Canvas API｜yusakuhamajima｜note

せっかくマガジンを作ったので、100記事くらいまでは書き続けていきたいと思ってます。

素人っぽさ

マガジンには、ヘッダー画像があったほうがいいので作りました。

素人っぽさがありながら、飽きなさそうなものにしました。

function render() {
	ctx.fillStyle = 'black';
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	for (let i = 0; i < 80; i++) {
		let colors = [
			'red',
			'blue',
			'yellow',
			'black',
			'white',
			'orange',
			'green',
			'skyblue',
			'purple',
		];

		let num = Math.floor(Math.random() * colors.length);
		let color = colors[num];
		drawArc(
			getRandomArbitrary(-100, 100),
			getRandomArbitrary(-100, 100),
			color
		);
	}

	drawText();
}

function drawArc(zureX, zureY, color) {
	ctx.globalAlpha = 0.6;
	ctx.beginPath();
	ctx.arc(
		canvas.width / 2 + zureX,
		canvas.height / 2 + zureY,
		200,
		0,
		Math.PI * 2,
		false
	);
	ctx.closePath();
	ctx.strokeStyle = color;
	ctx.stroke();
}

function drawText() {
	ctx.globalAlpha = 1;
	ctx.fillStyle = 'white';
	ctx.font = '50px serif';
	ctx.textAlign = 'center';
	ctx.fillText('Canvas API', canvas.width / 2, canvas.height / 2);
}

function getRandomArbitrary(min, max) {
	return Math.random() * (max - min) + min;
}

今回も冗長な感じですが、見た目がオッケーならそれで良し、としてます。

↓個人サイトで見れるようにしてます。ブラウザで見たい方はこちらで。
※個人サイトと言ってもそっけないものですが。。。

canvas | notenonote