|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263 |
- 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 ();
-
|