import Canvas from 'common/canvas' ; import Star from './star' ; class BgCanvas extends Canvas { ctx : CanvasRenderingContext2D ; font : string ; starCount : number ; stars : Star [ ] ; constructor ( width , height ) { super ( ) ; this . ctx = this . getContext ( '2d' ) ; this . starCount = 280 ; this . stars = [ ] ; this . initCanvasSize ( width , height ) ; this . createStars ( ) ; } private drawBg ( ctx ) { ctx . save ( ) ; ctx . fillStyle = 'hsla(217, 84%, 6%, 2)' ; ctx . fillRect ( 0 , 0 , this . width , this . height ) ; ctx . restore ( ) ; } private createStars ( ) { let { starCount , width , height , ctx } = this ; let option ; for ( let i = 0 ; i < starCount ; i ++ ) { option = { isBlink : false , isMeteor : false , } ; this . stars . push ( new Star ( ctx , option ) ) ; } } private drawStars ( ) { for ( let star of this . stars ) { star . render ( ) ; } } public render ( ) { let { ctx , width , height } = this ; ctx . clearRect ( 0 , 0 , width , height ) ; this . drawBg ( this . ctx ) ; this . drawStars ( ) ; return this ; } } export default BgCanvas ;