一個簡易的渲染迴圈結構

Silkage發表於2021-04-30

　　上程式碼：

　　<!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環境，雙擊用瀏覽器開啟，點選按鈕即可看到不停跳動的數字

　　結構

　　各部分含義


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69999013/viewspace-2770654/，如需轉載，請註明出處，否則將追究法律責任。

相關文章