|
|
@@ -0,0 +1,63 @@ |
|
|
|
class |
|
|
|
Talk |
|
|
|
{ |
|
|
|
static |
|
|
|
main () |
|
|
|
{ |
|
|
|
const canvas = new Canvas; |
|
|
|
|
|
|
|
setInterval (() => canvas.resize (), 100); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
class |
|
|
|
Canvas |
|
|
|
{ |
|
|
|
constructor () |
|
|
|
{ |
|
|
|
this.canvas = $ ('#canvas'); |
|
|
|
this.ctx = this.canvas[0].getContext ('2d'); |
|
|
|
|
|
|
|
this.bg = new Image (); |
|
|
|
this.bg.src = './assets/bg.jpg'; |
|
|
|
|
|
|
|
this.bg.onload = () => this.resize (); |
|
|
|
} |
|
|
|
|
|
|
|
resize () |
|
|
|
{ |
|
|
|
this.canvas.width ($ (window).width ()); |
|
|
|
this.canvas.height ($ (window).height ()); |
|
|
|
|
|
|
|
this.redraw (); |
|
|
|
} |
|
|
|
|
|
|
|
redraw () |
|
|
|
{ |
|
|
|
this.putBG (this.canvas.width (), this.canvas.height ()); |
|
|
|
} |
|
|
|
|
|
|
|
putBG (sizeX, sizeY) |
|
|
|
{ |
|
|
|
const width = this.bg.width; |
|
|
|
const height = this.bg.height; |
|
|
|
|
|
|
|
const vertical = sizeY / sizeX > height / width; |
|
|
|
|
|
|
|
console.log (sizeX, sizeY, width, height); |
|
|
|
|
|
|
|
const zoom = vertical ? (sizeX / width) : (sizeY / height); |
|
|
|
|
|
|
|
const x = vertical ? 0 : ((sizeX - width * zoom) / 2); |
|
|
|
const y = vertical ? ((sizeY - height * zoom) / 2) : 0; |
|
|
|
|
|
|
|
this.ctx.drawImage (this.bg, |
|
|
|
0, 0, width, height, |
|
|
|
x, y, width, height); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
Talk.main (); |
|
|
|
|