見出し画像

Canvasでhex-colorを使う

HTMLで色を指定する時、「#ffffff」とか「#000」のようにしますよね。
これは、「hex-color」というらしいです。

昨日初めて知りました。
今まで名前を知らなかったことにびっくりです。

前回作ったものにhex-colorで色を付けました。
hex-colorとかっこよく書いてますが、一般的なやりかたです。

let step = 30;

for (let i = 0; i < canvas.width / step; i++) {
	for (let j = 0; j < canvas.height / step; j++) {
		let colors = [
			"#58b4ae",
			"#ffe277",
			"#ffb367",
			"#ffe2bc",
			"#eb6383",
			"#fa9191",
			"#ffe9c5",
			"#b4f2e1",
		];
		
        let rnd_color = Math.floor(Math.random(colors.length) * 10);
		ctx.fillStyle = colors[rnd_color];
		ctx.fillRect(i * step, j * step, step, step);
	}
}

色は淡いものにしました。

「Color Hunt」を参考にしています。
https://colorhunt.co/

ウェブの色についてのサービスはいろいろありますね。
もっといろいろ集めてみようと思います。

画像1


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