소스 검색

Add overlay

master
부모
커밋
aa22a8aa56
1개의 변경된 파일33개의 추가작업 그리고 2개의 파일을 삭제
  1. 33
    2
      Starlight-Renderer.js

+ 33
- 2
Starlight-Renderer.js 파일 보기

@@ -13,7 +13,8 @@ class StarlightRenderer
constructor(canvas)
{
// The colour of the sky in the background.
this.skyColour = "hsla(248, 100%, 23%, 1)";
this.skyColour1 = "hsla(248, 100%, 23%, 1)";
this.skyColour2 = "hsla(248, 100%, 5%, 1)";
this.starCount = 1000;
this.starSize = new Range(2, 10);
@@ -61,6 +62,31 @@ class StarlightRenderer
}
}
generateGradients(canvas, context)
{
this.generateBackgroundGradient(canvas, context);
this.generateOverlayGradient(canvas, context);
}
generateBackgroundGradient(canvas, context)
{
this.backgroundGradient = context.createRadialGradient(
canvas.width / 2, canvas.height, canvas.height / 5,
canvas.width / 2, canvas.height, canvas.height * 1.2
);
this.backgroundGradient.addColorStop(0, this.skyColour1);
this.backgroundGradient.addColorStop(1, this.skyColour2);
}
generateOverlayGradient(canvas, context)
{
this.overlayGradient = context.createRadialGradient(
canvas.width / 2, canvas.height, canvas.height / 5,
canvas.width / 2, canvas.height, canvas.height * 1.2
);
this.overlayGradient.addColorStop(0, "hsla(248, 100%, 2%, 0.6)");
this.overlayGradient.addColorStop(1, "hsla(248, 100%, 2%, 0.01)");
}
nextFrame()
{
this.update();
@@ -85,12 +111,16 @@ class StarlightRenderer
render(canvas, context)
{
// Background
context.fillStyle = this.skyColour;
context.fillStyle = this.backgroundGradient;
context.fillRect(0, 0, this.canvas.width, this.canvas.height);
// Stars
for(let star of this.stars)
star.render(context);
// Overlay
context.fillStyle = this.overlayGradient;
context.fillRect(0, 0, this.canvas.width, this.canvas.height);
}
/**
@@ -100,6 +130,7 @@ class StarlightRenderer
this.canvas.width = window.innerWidth;
this.canvas.height = window.innerHeight;
this.generateGradients(this.canvas, this.context);
//this.render(this.context);
}

Loading…
취소
저장