记录一下小程序canvas

小程序canvas学习

效果图：

.wxml

<canvas style="width: 100vw; height: 100vh;" canvas-id="firstCanvas"></canvas>

.js

  onLoad: function (options) {

    const ctx = wx.createCanvasContext('firstCanvas')
    var canvasWidth = wx.getSystemInfoSync().windowWidth
    var canvasHeight = wx.getSystemInfoSync().windowHeight
    var numParticles = 50
    var bg = [18, 10, 34]
    var cols = ['#FF5722', '#FF9800', '#FF9800', '#FF9800', '#FF9800', '#B71C1C', '#00BCD4', '#00BCD4', '#009688']
    setup()
    function setup() {
      ctx.beginPath();
      ctx.rect(0, 0, canvasWidth, canvasHeight)
      ctx.fillStyle = `rgba(${bg[0]}, ${bg[1]}, ${bg[2]}, ${1})`
      ctx.fill()
      ctx.draw()
    }

    // window.requestAnimationFrame(animate);

    setInterval(animate, 60)
    function animate() {
      fade(0.3)
      draw()

      // window.requestAnimationFrame(function(){animate()})
    }

    function fade(amt) {
      ctx.beginPath();
      ctx.rect(0, 0, canvasWidth, canvasHeight)
      ctx.fillStyle = `rgba(${bg[0]}, ${bg[1]}, ${bg[2]}, ${amt})`
      ctx.fill()
      ctx.draw()
    }

    function Particle() {
      this.pos = {
        x: Math.random() * canvasWidth * 0.8 + canvasWidth * 0.1,
        y: Math.random() * canvasHeight * 0.8 + canvasHeight * 0.1
      }
      this.r = 1
      this.speed = 6
      this.step = Math.random() * 400
      this.vx = Math.random() * this.speed / 4 - this.speed / 8
      this.vy = Math.random() * this.speed / 4 - this.speed / 8
      this.colIndex = Math.floor(Math.random() * cols.length)
      this.history = []
      this.update = function () {
        this.step++
        this.step %= 400
        if (this.history.length > 5) {
          this.history.shift()
        }
        this.pos.x += this.vx
        this.pos.y += this.vy
        this.vx = this.vx * 0.98 + (Math.random() * this.speed * 2 - this.speed) * 0.12
        this.vy = this.vy * 0.98 + (Math.random() * this.speed * 2 - this.speed) * 0.12
        if (this.history.length > 4) {
          ctx.beginPath()
          ctx.moveTo(this.pos.x, this.pos.y)
          for (var i = this.history.length - 1; i >= 0; i--) {
            ctx.lineTo(this.history[i].x, this.history[i].y)
          }
          ctx.fillStyle = cols[this.colIndex]
          ctx.strokeStyle = cols[this.colIndex]
          ctx.fill()
          ctx.lineWidth = 2
          ctx.lineJoin = "round"
          // ctx.closePath()
          ctx.stroke()
        }
        if (this.pos.x > canvasWidth || this.pos.x < 0 || this.pos.y > canvasHeight || this.pos.y < 0) {
          delete this.pos
          delete this.history
          return false;
        }
        this.history.push({
          x: this.pos.x,
          y: this.pos.y
        })
        return true;
      }
    }

    var particles = [new Particle()]

    function draw() {
      if (particles.length < numParticles) {
        particles.push(new Particle())
      }
      particles = particles.filter(function (p) {
        return p.update()
      })

    }
  },

总结：目前小程序canvas还很卡 不建议使用

PC端：

效果图

代码：

js

<script type="text/javascript">

var canvas = document.createElement('canvas')
document.getElementsByTagName('body')[0].appendChild(canvas)
var ctx = canvas.getContext('2d')
var numParticles = 50

var bg = [18, 10, 34]
var cols = ['#FF5722', '#FF9800', '#FF9800', '#FF9800', '#FF9800', '#B71C1C', '#00BCD4', '#00BCD4', '#009688']

setup()

function setup() {
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  ctx.beginPath();
  ctx.rect(0, 0, canvas.width, canvas.height)
  ctx.fillStyle = `rgba(${bg[0]}, ${bg[1]}, ${bg[2]}, ${1})`
  ctx.fill()
}

// window.requestAnimationFrame(animate);

setInterval(animate, 1000/29.9)
function animate() {
  fade(0.3)
  draw()
  // window.requestAnimationFrame(function(){animate()})
}

function fade(amt) {
  ctx.beginPath();
  ctx.rect(0, 0, canvas.width, canvas.height)
  ctx.fillStyle = `rgba(${bg[0]}, ${bg[1]}, ${bg[2]}, ${amt})`
  ctx.fill()
}

function Particle () {
  this.pos = {
    x: Math.random() * canvas.width * 0.8 + canvas.width * 0.1,
    y: Math.random() * canvas.height * 0.8 + canvas.height * 0.1
  }
  this.r = 1
  this.speed = 6
  this.step = Math.random() * 400
  this.vx = Math.random() * this.speed/4 - this.speed/8
  this.vy = Math.random() * this.speed/4 - this.speed/8
  this.colIndex = Math.floor(Math.random()*cols.length)
  this.history = []
  this.update = function () {
    //////////////////////////////////////
    this.step ++
    this.step %= 400
    if (this.history.length > 5){
      this.history.shift()
    }
    this.pos.x += this.vx
    this.pos.y += this.vy
    this.vx = this.vx * 0.98 + (Math.random() * this.speed * 2 - this.speed) * 0.12
    this.vy = this.vy * 0.98 + (Math.random() * this.speed * 2 - this.speed) * 0.12
    //////////////////////////////////////
    if (this.history.length > 4){
      ctx.beginPath()
      ctx.moveTo(this.pos.x ,this.pos.y)
      for (var i = this.history.length-1; i >= 0;  i--){
        ctx.lineTo(this.history[i].x ,this.history[i].y)
      }
      // ctx.fillStyle = `hsla(${Math.sin( this.step / 300) * 70 + 70},${99}%,${50}%,1)`
      // ctx.strokeStyle = `hsla(${Math.sin( this.step / 300) * 70 + 70},${99}%,${50}%,0.5)`
      ctx.fillStyle = cols[this.colIndex]
      ctx.strokeStyle = cols[this.colIndex]
      ctx.fill()
      ctx.lineWidth = 2
      ctx.lineJoin = "round"
      // ctx.closePath()
      ctx.stroke()
    }

    //////////////////////////////////////
    if (this.pos.x > canvas.width || this.pos.x < 0 || this.pos.y > canvas.height || this.pos.y < 0) {
      delete this.pos
      delete this.history
      return false;
    }
    this.history.push({
      x: this.pos.x,
      y: this.pos.y
    })
    return true;
  }
}

var particles = [new Particle()]

function draw() {
  if (particles.length < numParticles) {
    particles.push(new Particle())
  }

  particles = particles.filter(function (p){
    return p.update()
  })

}
</script>