个人中心
gpt4 book ai didi

javascript - 如何更改 HTML Canvas 中每个数组元素的不透明度

转载 作者：行者123 更新时间：2023-11-28 10:23:56 30 4
gpt4 key购买 nike

如何使 Canvas 的每个数组元素透明？

例如，我有一个绘制了很多粒子的 Canvas :

<!Doctype HTML>

<html>
  <head>
    <meta charset="utf-8">
    <title>Snow Field</title>
  </head>
  
  <body>
    <img src="https://images.unsplash.com/photo-1415025148099-17fe74102b28?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjF9" style="position: fixed ; z-index: -1 ; width: 100%">
    <canvas id="snow-field-canvas" style="position: fixed"></canvas>
  
    <script>
      class SnowField {
        constructor() {
          this.fps = 40
          this.canvas = null
          this.width = 0
          this.height = 0
          this.snow = 200
          this.snowParticles = []
          this.intervalId = 0
        }

        initialize(canvas) {
          this.width = window.innerWidth
          this.height = window.innerHeight

          window.addEventListener('resize', () => {
            this.width = window.innerWidth
            this.height = window.innerHeight
            this.canvas.width = this.width
            this.canvas.height = this.height

            for (let i = 0 ; i < this.snow ; ++i)
              this.snowParticles[i] = new Snow(Math.random() * this.width, Math.random() * this.height)

            this.update()
          })

          this.canvas = document.getElementById(canvas)
          this.canvas.width = this.width
          this.canvas.height = this.height
        }

        start() {
          for (let i = 0 ; i < this.snow ; ++i )
            this.snowParticles[i] = new Snow(Math.random() * this.width, Math.random() * this.height)

          this.intervalId = setInterval(() => { this.update() }, 1000 / this.fps)
        }

        update() {
          var ctx = this.canvas.getContext('2d')
          ctx.clearRect(0, 0, this.width, this.height)

          for (let i = 0 ; i < this.snow ; ++i) {
            var snow = this.snowParticles[i]
            snow.x += Math.sin(i)
            snow.y += snow.yspeed
            // Change the opacity of each snow by 0.01 or something like that

            if ((snow.y > this.height) || (snow.x < -snow.size || snow.x > this.width))
              this.snowParticles[i] = new Snow(Math.random() * this.width, 0)

            ctx.fillStyle = '#fff'
            ctx.fillRect(snow.x, snow.y, snow.size, snow.size)
          }
        }
      }

      class Snow {
        constructor(x, y) {
          this.x = x
          this.y = y
          this.size = Math.random() * 2 + 1
          this.yspeed = Math.random() * 5 + 1
        }
      }
      
      var snowfield = new SnowField()
      snowfield.initialize('snow-field-canvas')
      snowfield.start()
    </script>
  </body>
</html>

现在，我想在 for 循环中将每 block 雪的不透明度降低一点(0.01 或类似值)，这样当到达视口(viewport)末端时看起来就像雪落下并褪色。

我已经按照答案 here ，他们倾向于改变整个 Canvas 的不透明度以及其中所有雪的不透明度。这不是我想要的。

最佳答案

如果您尝试逐渐减少，如 .01 中的步骤，雪将很快消失，因为 update 函数将被调用多次。相反，我修改了您的代码以根据雪粒子与地面的距离和阻尼系数来更改不透明度。

class SnowField {
  constructor() {
    this.fps = 40
    this.canvas = null
    this.width = 0
    this.height = 0
    this.snow = 200
    this.snowParticles = []
    this.intervalId = 0
  }

  initialize(canvas) {
    this.width = window.innerWidth
    this.height = window.innerHeight

    window.addEventListener('resize', () => {
      this.width = window.innerWidth
      this.height = window.innerHeight
      this.canvas.width = this.width
      this.canvas.height = this.height

      for (let i = 0; i < this.snow; ++i)
        this.snowParticles[i] = new Snow(Math.random() * this.width, Math.random() * this.height)

      this.update()
    })

    this.canvas = document.getElementById(canvas)
    this.canvas.width = this.width
    this.canvas.height = this.height
  }

  start() {
    for (let i = 0; i < this.snow; ++i)
      this.snowParticles[i] = new Snow(Math.random() * this.width, Math.random() * this.height)

    this.intervalId = setInterval(() => {
      this.update()
    }, 1000 / this.fps)
  }

  update() {
    var ctx = this.canvas.getContext('2d')
    ctx.clearRect(0, 0, this.width, this.height)

    for (let i = 0; i < this.snow; ++i) {
      var snow = this.snowParticles[i]
      snow.x += Math.sin(i)
      snow.y += snow.yspeed
      // Change the opacity of each snow by 0.01 or something like that 
      var op = this.height / ((snow.y + 1) * snow.dampening)

      ctx.fillStyle = "rgba(255, 255, 255, " + op + ")";

      if ((snow.y > this.height) || (snow.x < -snow.size || snow.x > this.width))
        this.snowParticles[i] = new Snow(Math.random() * this.width, 0)

      //ctx.fillStyle = '#fff'
      ctx.fillRect(snow.x, snow.y, snow.size, snow.size)
    }
  }
}

class Snow {
  constructor(x, y) {
    this.x = x
    this.dampening = 10 // Adjust this value to make snow disappear slower/faster/Random
    this.y = y
    this.size = Math.random() * 2 + 1
    this.yspeed = Math.random() * 5 + 1
  }
}

var snowfield = new SnowField()
snowfield.initialize('snow-field-canvas')
snowfield.start()
<img src="https://images.unsplash.com/photo-1415025148099-17fe74102b28?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjF9" style="position: fixed ; z-index: -1 ; width: 100%">
<canvas id="snow-field-canvas" style="position: fixed"></canvas>

关于javascript - 如何更改 HTML Canvas 中每个数组元素的不透明度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59434530/

30 4 0
文章推荐： javascript - 如何在特定浏览器宽度下更改标签
文章推荐： ios -> -[UITableView dequeueReusableCellWithIdentifier :forIndexPath:] 断言失败
文章推荐： ios - 如何从 iPhone 上的 Watch 触发后台进程(触发器 : Watch)?
文章推荐： html - 仅使用 css 使方框斜体的 Angular 变圆
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com