JavaScriptのCanvas API を使ってみたい

GenerativeArt でかっこいいアートを作ってみたい。私の夢です。

p5.js とか TouchDesigner が有名ですが、Canvas はぜひマスターしたいと思ってます。

Canvas 基本

CanvasAPI のチュートリアルをみて作ってみました。

グレーの背景に赤い四角がある単純なものです。

↓canvas.js

	const canvas = document.getElementById('canvas');
	const ctx = canvas.getContext('2d');
	ctx.width = 600;
	ctx.height = 400;
	// background
	ctx.fillStyle = 'gray';
	ctx.fillRect(0, 0, ctx.width, ctx.height);
	// rect
	ctx.fillStyle = 'green';
	ctx.fillRect(30, 30, 100, 100);
	<!-- HTMLはこちら
	<canvas id="canvas" width="600" height="500"></canvas>
	<script src="./canvas.js"></script>
	-->

view raw canvas.js hosted with ❤ by GitHub

CanvasAPIチュートリアル

Canvasってp5.jsと違って、もろJavaScriptなので勉強になっていい感じですね。