Skip to main content

screen

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="../https://unpkg.com/three@0.142.x/build/three.min.js"></script>
  <script src="https://unpkg.com/xnew@2.3.x/dist/xnew.js"></script>
</head>

<body>
  <div id="main"
    style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap;">
  </div>
  <script>
    xnew('#main', (self) => {
      xnew({ style: { margin: '8px auto' } }, () => {
        xnew({ tagName: 'p' }, 'screen fit: contain (default)');
        xnew(Screen, 'contain');
      });
      xnew({ style: { margin: '8px auto' } }, () => {
        xnew({ tagName: 'p' }, 'screen fit: cover');
        xnew(Screen, 'cover');
      });
      xnew({ style: { margin: '8px auto' } }, () => {
        xnew({ tagName: 'p' }, 'screen fit: fill');
        xnew(Screen, 'fill');
      });
    });

    function Screen(self, fit) {
      xnew.nest({ style: { width: '200px', height: '150px', border: '1px solid #A0A' } });
      const screen = xnew(xnew.Screen, { width: 400, height: 200, fit });
      
      const ctx = screen.canvas.getContext('2d');
      const cx = screen.canvas.width / 2;
      const cy = screen.canvas.height / 2;
      const s = Math.min(cx, cy) / 4;

      ctx.fillStyle = "rgb(0,0,0)";
      ctx.fillRect(0, 0, screen.canvas.width, screen.canvas.height);

      ctx.fillStyle = "rgb(200,0,100)";
      ctx.fillRect(cx - 0.6 * cx - s, cy - s, s * 2, s * 2);

      ctx.fillStyle = "rgb(100,200,0)";
      ctx.fillRect(cx + 0.0 * cx - s, cy - s, s * 2, s * 2);

      ctx.fillStyle = "rgb(0,100,200)";
      ctx.fillRect(cx + 0.6 * cx - s, cy - s, s * 2, s * 2);
    }
  </script>
</body>

</html>