Canvas를 공부중인데, MDN 튜토리얼에 나오는
원그리기 예제를 해봤습니다. (코드는 약간 바꿨습니다.)
2중 for문 안에서 strokeStyle로 색깔을 바꿔주면서 원을 그립니다.
<!DOCTYPE html>
<style>
#canvas1 {
border: 2px solid pink;
max-width: 100%;
box-sizing: border-box;
}
</style>
<canvas id="canvas1" width="330" height="330"></canvas>
<script>
const canvas = document.getElementById("canvas1");
const ctx = canvas.getContext("2d");
ctx.lineWidth = 2;
const LEFT = 50;
const TOP = 50;
const RADIUS = 20;
const DIST = RADIUS * 2 + 5; // 중점간 거리
for (var i = 0; i < 6; i++) {
for (var j = 0; j < 6; j++) {
ctx.strokeStyle = rgb(250, 0 + 40 * i, 0 + 40 * j);
ctx.beginPath();
ctx.arc(LEFT + (DIST * i), TOP + (DIST * j), RADIUS, 0, Math.PI * 2);
ctx.stroke();
}
}
function rgb(r, g, b) {
return `rgb(${r},${g},${b})`;
}
</script>