zoukankan      html  css  js  c++  java
  • 一个简易的渲染循环结构

    上代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Micro Renderer</title>
    </head>
    
    <body>
      <span id="tips"></span>
      <hr>
      <button onclick="init()">Start Render</button>
      <script>
        function startRender(renderer) {
          const layer = renderer.layer
          function render(time) {
            layer.render(time)
            requestAnimationFrame(render)
          }
    
          requestAnimationFrame(render)
        }
    
        class Layer {
          constructor(dom) {
            this.dom = dom
          }
          render(time) {
            this.dom.innerHTML = `Time cost: ${time}`
          }
        }
        class Renderer {
          constructor(layer) {
            this.layer = layer
          }
    
          beginRender() {
            startRender(this)
          }
        }
    
        function init() {
          const layer = new Layer(document.getElementById('tips'))
          const renderer = new Renderer(layer)
          renderer.beginRender()
        }
      </script>
    </body>
    
    </html>
    

    不需要HTTP环境,双击用浏览器打开,点击按钮即可看到不停跳动的数字

    结构

    各部分含义

  • 相关阅读:
    图片预览神器
    近期错题总结
    鬼谷子的钱袋(lgP2320)
    小明的账单
    合并果子(lgP1090)
    看病
    稀有矿井
    舞会(lgP1352)
    三国风云
    天上掉 Pizza
  • 原文地址:https://www.cnblogs.com/onsummer/p/14436692.html
Copyright © 2011-2022 走看看