backs.ts (1347B)
1 let canvas: HTMLCanvasElement; 2 let context: CanvasRenderingContext2D; 3 4 let bkgCallback: (canvasCtx: HTMLCanvasElement, 5 contex2d: CanvasRenderingContext2D) => void; 6 7 export function initBackground() { 8 let newCanvas: HTMLCanvasElement = document.createElement('canvas'); 9 newCanvas.setAttribute("id", 'bkg-canvas'); 10 newCanvas.style['position'] = 'fixed'; 11 newCanvas.style['left'] = '0'; 12 newCanvas.style['right'] = '0'; 13 newCanvas.style['top'] = '0'; 14 newCanvas.style.zIndex = '-100'; 15 newCanvas.width = window.innerWidth; 16 newCanvas.height = window.innerHeight; 17 18 document.body.appendChild(newCanvas); 19 20 canvas = <HTMLCanvasElement>document.getElementById('bkg-canvas'); 21 context = canvas.getContext('2d'); 22 } 23 24 function doBackground() { 25 context.clearRect(0, 0, canvas.width, canvas.height); 26 27 bkgCallback(canvas, context); 28 29 context.fill(); 30 context.closePath(); 31 context.drawImage(canvas, 0, 0, canvas.width, canvas.height); 32 } 33 34 export function setBkgFunc(callback: (canvasCtx: HTMLCanvasElement, 35 contex2d: CanvasRenderingContext2D) => void) { 36 bkgCallback = callback; 37 doBackground(); 38 } 39 40 window.addEventListener('resize', _ => { 41 canvas.width = window.innerWidth; 42 canvas.height = window.innerHeight; 43 doBackground(); 44 });