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

收藏

本帖最后由诗仙·1957 于 2024-6-13 13:23 编辑

效果预览
活字格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

		自动登录	找回密码
密码			立即注册

[资源分享] 举一反三之canvas画布樱花背景特效

0 个回复