MDN을 보면서 공부하다가, 이 예제를 보고 참고해서 밤하늘에 별그리기를 만들어 봤습니다. 원래 clip 예제인데 저는 clip 부분은 뺐습니다.
1초에 하나씩 별이 그려집니다. Clear 버튼을 누르면 별들이 지워집니다.
<!DOCTYPE html>
<style>
#canvas1 {
border: 2px solid gray;
max-width: 100%;
box-sizing: border-box;
}
</style>
<p><button onclick="btnClick()">Clear</button></p>
<div>
<canvas id="canvas1" width="400" height="300"></canvas>
</div>
<script>
function btnClick() { clear(); }
const canvas = document.getElementById("canvas1");
const ctx = canvas.getContext("2d");
clear();
setInterval(draw, 1000);
function clear() {
var grad = ctx.createLinearGradient(0, 0, 0, canvas.height);
grad.addColorStop(0.4, "navy");
grad.addColorStop(1, "purple");
ctx.fillStyle = grad;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function draw() {
ctx.fillStyle = "#ffd";
var x = Math.random() * canvas.width;
var y = Math.random() * canvas.height;
var r = Math.random() * 3 + 2; // 2 ~ 5
drawStar(x, y, r);
}
function drawStar(x, y, r) {
ctx.save();
ctx.translate(x, y);
ctx.rotate(Math.random() * Math.PI * 2); // random angle
ctx.beginPath();
ctx.moveTo(r, 0);
for (var i = 0; i < 9; i++) {
ctx.rotate(Math.PI * 0.2);
if (i % 2 == 0) ctx.lineTo(r * 0.382, 0);
else ctx.lineTo(r, 0);
}
ctx.closePath();
ctx.fill();
ctx.restore();
}
</script>