微信小程序模块化---导入和导出

最新推荐文章于 2024-08-22 17:20:04 发布

转载最新推荐文章于 2024-08-22 17:20:04 发布 · 4.6k 阅读

wxxm 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一个简单的背景动画实现方法及音频播放的JavaScript代码。通过canvas元素绘制滚动背景，并使用Audio对象播放背景音乐，适用于网页应用。

导出

backgroud.js

export default function(ctx) {
  var bg = new Image();
  bg.src = "./images/bg.jpg";
  bg.width = 512;
  bg.height = 512;
  var width = window.innerWidth; //全局对象
  var height = window.innerHeight;

  var top = 0;
  move();
  function move() {
    top++;
    requestAnimationFrame(function() {
      ctx.clearRect(0, 0, width, height);
      ctx.drawImage(bg, 0, 0, bg.width, bg.height, 0, top, width, height);
      ctx.drawImage(
        bg,
        0,
        0,
        bg.width,
        bg.height,
        0,
        -height + top,
        width,
        height
      );
      if (top == height) {
        top = 0;
      }
      move();
    });
  }
}

导出 audio.js

export default function() {
  var bgm = new Audio();
  bgm.volume = 0.02;
  bgm.src = "./audio/bgm.mp3";
  bgm.play();
}

导入 background.js 和audio.js

import "./js/component/weapp-adapter.js"
import Audio from "./js/component/audio"
import Background from "./js/component/background.js"
var ctx = canvas.getContext("2d");
Background(ctx)
Audio()