index-worker.html 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Local Development - Worker mode</title>
  5. <style>
  6. html,
  7. body {
  8. width: 100%;
  9. height: 100%;
  10. padding: 0;
  11. margin: 0;
  12. overflow: hidden;
  13. }
  14. #renderCanvas {
  15. width: 100%;
  16. height: 100%;
  17. display: block;
  18. font-size: 0;
  19. }
  20. #fps {
  21. position: absolute;
  22. background-color: black;
  23. border: 2px solid red;
  24. text-align: center;
  25. font-size: 16px;
  26. color: white;
  27. top: 15px;
  28. right: 10px;
  29. width: 60px;
  30. height: 20px;
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <div id="fps">0</div>
  36. <canvas id="renderCanvas" touch-action="none"></canvas>
  37. <script>
  38. var canvas = document.getElementById("renderCanvas");
  39. canvas.width = canvas.clientWidth;
  40. canvas.height = canvas.clientHeight;
  41. var offscreen = canvas.transferControlToOffscreen();
  42. var worker = new Worker("worker.js");
  43. worker.postMessage({canvas: offscreen}, [offscreen]);
  44. </script>
  45. </body>
  46. </html>