一个简易的渲染循环结构
上代碼：
<!DOCTYPE html>
<html>
<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 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環境，雙擊用瀏覽器打開，點擊按鈕即可看到不停跳動的數字
結構
各部分含義
總結
以上是生活随笔為你收集整理的一个简易的渲染循环结构的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 解决gc current request
- 下一篇： Highcharts 散点图介绍