时间戳

首页 > 解决方案 > 画布上的视差星星。这对网站来说太多了吗？

javascript - 画布上的视差星星。这对网站来说太多了吗？

问题描述

网络开发新手。我想让星星在页面上移动。但是，我担心这对于一个简单的网站来说可能太多了？或者也许有办法优化代码？

const canvas = document.getElementById('canvas')
const context = canvas.getContext('2d')
const starCount = [700, 200, 100]
const stars = []

window.addEventListener('resize', resizeCanvas, false)
resizeCanvas()
function resizeCanvas() {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
    drawStars()
}

function drawStars() {
    for (let i = 0, j = starCount.length; i < j; i++) {
        for (let k = 0, l = starCount[i]; k < l; k++) {
            const x = Math.random() * canvas.width
            const y = Math.random() * canvas.height
            context.beginPath()
            stars.push({ posX: x, posY: y, radius: (i + 1) / 2.5, speed: (3 - i) * 0.25 })
            context.arc(x, y, (i + 1) / 2.5, 0, 360)
            context.fillStyle = 'white'
            context.fill()
        }
    }
}
drawStars()

function redraw() {
    context.clearRect(0, 0, canvas.width, canvas.height)
    for (let i = 0, j = stars.length; i < j; i++) {
        const speed = stars[i].speed
        context.beginPath()
        if ((stars[i].posY -= speed) < 0) {
            stars[i].posY = canvas.height
        } else {
            stars[i].posY -= speed
        }
        context.arc(stars[i].posX, stars[i].posY, stars[i].radius, 0, 360)
        context.fillStyle = 'white'
        context.fill()
    }
}

setInterval(() => {
    redraw()
}, 17);

标签： javascripthtml

解决方案

这里有很多事情：您必须了解网站的目标受众，才能知道您是否在视线上做得太多。瞄准富人？他们可能有购买好电脑的可支配收入，并且可以处理这项任务。瞄准尽可能广泛的范围？让您的网站根据观众灵活。如果您无法维持高帧速率，则回退到静态图像。

下一个性能：你可以从webgl获得更好的性能，但是你必须爬上webgl的山。

其他性能： setInterval 是重绘循环的坏习惯。使用 requestAnimationFrame 在主 UI 循环上正确进行更改。如果您需要降低帧速率，则跳过一些帧。

画布性能：画布是基于状态的，如果您的状态之前没有更改，则无需重新应用诸如 fillStyle 之类的东西，因此请将它们从循环中取出。您可以通过在条件中不使用评估属性来微优化循环：

for (let i = 0, endi = stars.length; i < endi; ++i)

你可能还有更多的小事可以做...

下一个设计：如果您认为它确实是使您的网站脱颖而出的元素，那么请努力使设计适合所有人。

推荐阅读