举一反三之canvas画布樱花背景特效

效果预览
活字格canvas画布樱花背景特效集成演示_哔哩哔哩_bilibili
参考资料
【资源分享】登录页面背景:4个动态背景,炫酷的3D粒子特效(canvas)+视频背景 - 活字格专区 - 格友杂谈 - 葡萄城开发者社区 (grapecity.com.cn)

重点分析  
script.js    //登录页面是否需要显示背景特效。。。。如果需要就更改一下


        if (divElement_observerDemo) {
            //console.log('登录页面加载已完成');
            replaceElementIfNeeded();//创建画板
            //下面就可以写你要执行的canvas画布加载过程或者函数

script1.js   这个文件是替换要显示的元素路径或者id查找规则

例如我修改为，把   


  // 创建新的<canvas>元素并赋予ID
  var newCanvas = document.createElement('canvas');
  newCanvas.id = 'sakura'; // 添加ID
  newCanvas.width = '400'; // 示例宽度
  newCanvas.height = '300'; // 示例高度

  //newDiv.appendChild(newInnerDiv);
  newDiv.appendChild(newCanvas);

如果你执行的元素与例子的名称不一致时候 这里就改一下，让其newDiv.appendChild(newCanvas); 查找的ID变更
其他原本代码不变，例如：

function replaceElementIfNeeded() {
  // 检查是否已经存在具有'id'为'container'和'output'的元素
  var containerElement = document.getElementById('container');
  var outputElement = document.getElementById('output');

  // 如果这两个元素都存在，不执行替换操作
  if (containerElement && outputElement) {
    //console.log("元素已存在，无需再次替换。");
    return;
  }

  // 创建新的<div>元素并添加样式
  var newDiv = document.createElement('div');
  newDiv.id = 'container';
  newDiv.style.position = 'absolute';
  newDiv.style.height = '100%';
  newDiv.style.width = '100%';
  
  var newInnerDiv = document.createElement('div');
  newInnerDiv.id = 'output';
  newInnerDiv.style.width = '100%';
  newInnerDiv.style.height = '100%';
  
  newDiv.appendChild(newInnerDiv);

  // 获取要替换的元素
  var elementToReplace = document.querySelector('#bkg_1 > div');

  // 如果要替换的元素存在，执行替换操作
  if (elementToReplace) {
    elementToReplace.parentNode.replaceChild(newDiv, elementToReplace);
    //console.log("元素已成功替换。");
  } else {
    //console.log("要替换的元素不存在，无法执行替换操作。");
  }
}


最后把要显示的页面对应加上页面加载时候执行命令
replaceElementIfNeeded();//创建画板
window.addEventListener('load', function(e) {
    var canvas = document.getElementById("sakura");
    try {
        makeCanvasFullScreen(canvas);
        gl = canvas.getContext('experimental-webgl');
    } catch(e) {
        alert("WebGL not supported." + e);
        console.error(e);
        return;
    }

    window.addEventListener('resize', onResize);

    setViewports();
    createScene();
    initScene();

    timeInfo.start = new Date();
    timeInfo.prev = timeInfo.start;
    animate();
});

根据原教程里面介绍有一个js框架资源站点，
https://www.jq22.com/
此帖中的特效也是从里面下载的，原效果预览地址：
https://www.jq22.com/yanshi23328
下载地址：
搜索加3d樱花背景动画效果 (jq22.com)


相关咨询尽在   Qq群：106929215