写在前面

写过博客的同学都知道，飘落樱花是一个比较常见的博客特效。
平时都是用插件来实现的，有想过去了解它到底是怎么实现的吗？

它是用canvas实现的
就针对vuepress，我们需要写一个vue组件来实现效果

本篇文章会贴出樱花的vue组件源码和vuepress使用樱花的步骤

可以先来我博客看看效果，哈哈博客效果演示

樱花的源码

<template><div class="Sakura"><canvas id="canvas_sakura" ref="canvas_sakura" :style="{ zIndex: zIndex }"></canvas></div>
</template><script>
class Sakura {constructor(x, y, s, r, fn, that, img) {this.x = x;this.y = y;this.s = s;this.r = r;this.fn = fn;this.that = that;this.img = img;}draw (cxt) {cxt.save();// eslint-disable-next-line no-unused-varsvar xc = 40 * this.s / 4;cxt.translate(this.x, this.y);cxt.rotate(this.r);cxt.drawImage(this.img, 0, 0, 40 * this.s, 40 * this.s)cxt.restore();}update () {this.x = this.fn.x(this.x, this.y);this.y = this.fn.y(this.y, this.y);this.r = this.fn.r(this.r);if (this.x > window.innerWidth ||this.x < 0 ||this.y > window.innerHeight ||this.y < 0) {this.r = this.that.getRandom('fnr');if (Math.random() > 0.4) {this.x = this.that.getRandom('x');this.y = 0;this.s = this.that.getRandom('s');this.r = this.that.getRandom('r');} else {this.x = window.innerWidth;this.y = this.that.getRandom('y');this.s = this.that.getRandom('s');this.r = this.that.getRandom('r');}}}
}
class SakuraList {constructor() {this.list = []}push (sakura) {this.list.push(sakura);}update () {for (var i = 0, len = this.list.length; i < len; i++) {this.list[i].update();}}draw (cxt) {for (var i = 0, len = this.list.length; i < len; i++) {this.list[i].draw(cxt);}}get (i) {return this.list[i];}size () {return this.list.length;}
}
export default {// eslint-disable-next-line vue/multi-word-component-namesname: 'Sakura',data () {return {staticx: false,stop: null,num: 50,show: true,zIndex: 0,}},mounted () {this.$nextTick(() => {if (this.show) {this.startSakura()}})},methods: {getRandom (option) {var ret, random;switch (option) {case 'x':ret = Math.random() * window.innerWidth;break;case 'y':ret = Math.random() * window.innerHeight;break;case 's':ret = Math.random();break;case 'r':ret = Math.random() * 6;break;case 'fnx':random = -0.5 + Math.random() * 1;// eslint-disable-next-line no-unused-varsret = function (x, y) {return x + 0.15 * random - 1.7 * 0.3;};break;case 'fny':random = 1.5 + Math.random() * 0.7ret = function (x, y) {return y + 0.3 * random;};break;case 'fnr':random = Math.random() * 0.03;ret = function (r) {return r + random;};break;}return ret;},startSakura () {let that = this// eslint-disable-next-line no-global-assignrequestAnimationFrame = window.requestAnimationFrame ||window.mozRequestAnimationFrame ||window.webkitRequestAnimationFrame ||window.msRequestAnimationFrame ||window.oRequestAnimationFrame;var canvas = document.getElementById('canvas_sakura');this.staticx = true;this.$refs.canvas_sakura.width = window.innerWidth;this.$refs.canvas_sakura.height = window.innerHeight;var cxt = this.$refs.canvas_sakura.getContext('2d');var sakuraList = new SakuraList();const img = new Image();img.src = '/Hundred-refining-into-Immortals/sakura.png'; //樱花效果图相对路径for (var i = 0; i < that.num; i++) {let sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny, randomFnR;randomX = this.getRandom('x');randomY = this.getRandom('y');randomR = this.getRandom('r');randomS = this.getRandom('s');randomFnx = this.getRandom('fnx');randomFny = this.getRandom('fny');randomFnR = this.getRandom('fnr');sakura = new Sakura(randomX, randomY, randomS, randomR, {x: randomFnx,y: randomFny,r: randomFnR}, this, img);sakura.draw(cxt);sakuraList.push(sakura);}this.stop = requestAnimationFrame(function fn () {cxt.clearRect(0, 0, canvas.width, canvas.height);sakuraList.update();sakuraList.draw(cxt);that.stop = requestAnimationFrame(fn);})},stopp () {if (this.staticx) {var child = document.getElementById("canvas_sakura");child.parentNode.removeChild(child);window.cancelAnimationFrame(this.stop);this.staticx = false;} else {this.startSakura();}}}
}
</script><style scoped>
#canvas_sakura {pointer-events: none;position: fixed;top: 0;left: 0;
}
</style>

在vuepress使用

在.vuepress/components文件夹下面新建一个Sakura.vue文件，内容就是上面的源码
- 在vuepress里面会自动吧上面文件夹里面的vue文件挂载到全局
- 这样全局就可以使用
在你想出现樱花的页面调用组件就可以了，这样<Sakura></Sakura>

在vuepress博客添加樱花特效(vue樱花组件源码)相关推荐

【java毕业设计】基于javaEE+SSM+MySql的个人博客系统设计与实现（毕业论文+程序源码）——个人博客系统
基于javaEE+SSM+MySql的个人博客系统设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于javaEE+SSM+MySql的个人博客系统设计与实现,文章末尾附有本毕业设计的论文和源 ...
Open Source Blog 开源ASP.NET/C# 博客平台 v2.5 发布（提供源码下载）
EntLib.com Blog 开源ASP.NET/C# 博客平台 v2.5 发布(提供源码下载) 基于Subtext v2.0 开源ASP.NET博客系统的中文汉化及定制化开发,EntLib.c ...
springboot基于vue.js的掌上博客系统的设计与实现毕业设计源码063131
Springboot掌上博客系统的设计与实现摘要掌上博客系统是当今网络的热点,博客技术的出现使得每个人可以零成本.零维护地创建自己的网络媒体,Blog站点所形成的网状结构促成了不同于以往社区的B ...
如何给CSDN博客添加个人微信公众号二维码或自定义栏目
公众号查看文章更清晰在使用CSDN的过程中,可以看到有些博主的主页有个人微信二维码,微信公众号二维码等一些个人栏目信息.这对作者而言,可以让其他浏览博客的游客和作者进行更有效的沟通,也可以在这里对自 ...
基于Spring Boot的个人博客系统的设计与实现毕业设计源码271611
目录摘要 1 绪论 1.1研究意义 1.2开发背景 1.3系统开发技术的特色 1.4论文结构与章节安排 2个人博客系统系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1数据增加流程 ...
毕业设计 - 个人博客系统的设计与实现【源码+论文】
文章目录前言一.项目设计 1. 模块设计博主功能用例游客功能用例 2. 实现效果二.部分源码项目源码前言今天学长向大家分享一个 Java web 毕业设计项目: 个人博客系统的设计与 ...
全栈开发实战（一）——简易博客社区后端搭建教程（附源码）
全栈开发实战(一)--简易博客社区后端搭建项目展示视频项目Github地址 (一)项目准备在项目开始前,首先确保你已安装好Go语言并配置好Go语言编辑器,同时安装好MySQL或其他数据库,其次, ...
真正CSDN博客文章一键转载插件（含源码）
插件地址:https://greasyfork.org/zh-CN/scripts/381053-csdn%E5%8D%9A%E5%AE%A2%E6%96%87%E7%AB%A0%E8%BD%AC%E ...
Python+Vue计算机毕业设计web的个人分享博客的设计与实现1w530（源码+程序+LW+部署）
该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程项目运行环境配置: Python3.7.7+Django+Mysql5.7+pip list+HBuilderX(Vscode也行)+V ...

在vuepress博客添加樱花特效(vue樱花组件源码)

文章目录

写在前面

樱花的源码

在vuepress使用

在vuepress博客添加樱花特效(vue樱花组件源码)相关推荐

最新文章

热门文章