在vue中使用canvas实现简单特效（下雨天）

效果展示

还不了解canvas的同学可以先看一下官方的api

https://www.canvasapi.cn

话不多说直接上代码

在页面中添加canvas标签

<template><div class="home"><canvas id="canvas" /></div>
</template>

初始化canvas

initCanvas() {const canvas = document.querySelector("#canvas");this.ctx = canvas.getContext("2d");canvas.width = window.innerWidth;canvas.height = window.innerHeight;init(this.ctx);
},

页面全部代码

<template><div class="home"><canvas id="canvas" /><!-- 换成自己的图片 --><img :style="canvasStyle" src="../assets/pic121.jpg" /></div>
</template><script>
import { init } from "@/components/canvas.js";export default {name: "Home",data() {return {canvasStyle: {position: "fixed",width: "100%",height: "100%",zIndex: "-1",left: "0",bottom: "0",},ctx: {},};},mounted() {this.initCanvas();},methods: {initCanvas() {const canvas = document.querySelector("#canvas");this.ctx = canvas.getContext("2d");canvas.width = window.innerWidth;canvas.height = window.innerHeight;init(this.ctx);},},
};
</script>

创建rain.js

// 画笔
var ctx;
// 画布的宽高
var w = window.innerWidth;
var h = window.innerWidth;
// 存放雨滴的数组
var arr = [];
// 雨滴的数量
var size = 150;
// 雨滴的构造函数
class Rain {x = random(w);y = random(h);ySpeed = random(2) + 5;show() {drawLine(this.x, this.y);}run() {if (this.y > h) {this.y = 0;this.x = random(w);}this.y = this.y + this.ySpeed;}
}
// 画线（雨滴）
function drawLine(x1, y1) {ctx.beginPath();ctx.strokeStyle = "#cccccc";ctx.moveTo(x1, y1);// 雨长度为30ctx.lineTo(x1, y1 + 30);ctx.stroke();
}
// 生成随机数
function random(num) {return Math.random() * num;
}
// 开始
function start() {for (var i = 0; i < size; i++) {var rain = new Rain();arr.push(rain);rain.show();}setInterval(() => {ctx.clearRect(0, 0, w, h);for (var i = 0; i < size; i++) {arr[i].show();arr[i].run();}}, 10);
}
// 初始化
function init(ctx1) {ctx = ctx1;start();
}
// 导出初始化函数
export { init };

在vue中使用canvas实现简单特效（下雨天）相关推荐

vue中实现公告栏的滚动特效
vue中实现公告栏的滚动特效文章目录 vue中实现公告栏的滚动特效前言修改版本前言 vue中实现公告栏的滚动特效修改版本 <template><div id="d ...
vue 中利用canvas 给pdf文件加水印---详细教程（附上完整代码）
需求:在h5网页中打开pdf文件,要求给文件添加水印实现技术及插件:vue,vue-pdf,canvas 插件安装: npm i vue-pdf --save npm i pdf-lib --sav ...
vue中使用canvas实现移动端手写板、电子签名功能
直接上Demo <template><div class="hello"><button type v-on:click="clear&qu ...
vue中老虎机效果的简单实现-带立即停止功能
持续更新中... 1. 新增 prizeNum: 3, // 可视区域每列展示的奖品数,展示为三列,每列三条数据,如下图 2. 新增动画过程中再次点击,直接抽奖结束,滚到对应中奖位置 vue前端-老虎 ...
vue中使用canvas手写输入识别中文
效果图前言最近做一个室外大屏项目,系统上的输入法使用不方便,客户要求做一个嵌入web网页的手写输入法. 核心后端接口api:使用 QQ输入法手写接口 https://handwriting.sh ...
记录下vue中使用canvas：给漂浮的圆球加阴影（发光边）
漂的气泡不同的外阴影(发光边)就这样场景:随机生成几个透明的发光的圆,滚来滚去,里面显示文字,每个圆可点击,携带参数跳转不同路由. 1.原想用strokeStyle画,但是出来后特别浅淡,基本看不见 ...
vue中实现canvas画布基本操作
<template><div class="practice-html5"><div><p>canvas1</p>< ...
Vue中利用canvas添加炫动背景
1.展示页面 <template><div id="main"><canvas id="myCanvas" style=" ...
简单实现vue中的登录拦截
本文主要讲述如何在vue中使用路由判断简单实现登陆的的拦截. 如何实现首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利 ...

在vue中使用canvas实现简单特效（下雨天）

效果展示

还不了解canvas的同学可以先看一下官方的api

话不多说直接上代码

在页面中添加canvas标签

初始化canvas

页面全部代码

创建rain.js

在vue中使用canvas实现简单特效（下雨天）相关推荐

最新文章

热门文章