举一反三之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
页:
[1]