vue canvas 粒子动效字体组件

已于 2023-08-31 17:16:09 修改
阅读量894 收藏 3
点赞数
分类专栏： 可视化、动效 文章标签： vue.js javascript 前端
于 2022-03-09 17:36:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45274678/article/details/123382771
版权

在这里插入图片描述
引用组件页面

<praticle-text 
      :text="'粒子动效字体组件'"
      :text-size="40"
      :text-color="'#ff00ff'"
      :canvas-height="100"
      :canvas-width="500"
      :point-amount="5000"
      ></praticle-text>

引入组件

import praticleText from '../components/praticleText.vue'
export default {
  components:{
    praticleText
  },
}

praticleText.vue

<template>
    <div>
        <!--  粒子字体动效组件 -->
        <canvas id="praticle-text" :style="{width:canvasWidth+'px',height:canvasHeight+'px'}"></canvas>
    </div>
</template>
<script>
/*
*   粒子字体动效组件
*   @props      canvasWidth              {Number}    非必填    画布宽,默认800      
*   @props      canvasHeight             {Number}    非必填    画布高,默认200
*   @props      textColor                {String}    非必填    文字颜色,默认蓝色   
*   @props      textSize                 {Number}    非必填    文字大小，默认50         
*   @props      text                     {String}    必填      文字内容           
*   @props      pointAmount              {Number}    非必填    粒子数量 ,默认5000         
*   @props      isClickAnimation         {Boolean}   非必填    是否需要鼠标点击效果，默认‘是’         
*   @props      isMouseMoveAnimation     {Boolean}   非必填    是否需要鼠标移动效果，默认‘是’
*/
export default {
    name:'praticleText',
    props:{
        canvasWidth:{
            type:Number,
            default:800,
            required:false
        },
        canvasHeight:{
            type:Number,
            default:200,
            required:false
        },
        textColor:{
            type:String,
            default:'#2257a8',
            required:false
        },
        textSize:{
            type:Number,
            default:50,
            required:false
        },
        text:{
            type:String,
            default:'这里是文字内容',
            required:true
        },
        pointAmount:{
            type:Number,
            default:5000,
            required:false
        },
        isClickAnimation:{
            type:Boolean,
            default:true,
            required:false
        },
        isMouseMoveAnimation:{
            type:Boolean,
            default:true,
            required:false
        },
    },
    data(){
        return{
            canvas:null,//画布
            ctx:null,//在画布上绘图的环境
            points:[],
            initialDisplacement:100,
            initialVelocity:3,
            fleeSpeed:1,
            mouse:{
                x: 0,
                y: 0
            },
            settleSpeed:1,
            velocityRetenTion:0.95,
            scatterVelocity:3,
            fleeDistance:20,
            size:1
            
        }
    },
    methods:{
        adjustText() {
            this.ctx.fillStyle = this.textColor;
            this.ctx.textBaseline = "middle";
            this.ctx.textAlign = "center";
            this.ctx.font = this.textSize + "px Arial";
            this.ctx.fillText(this.text, this.canvasWidth/2, this.canvasHeight/2);
            var textWidth = this.ctx.measureText(this.text).width;
            if (textWidth == 0) {
                return;
            }
            var minX = this.canvas.width/2 - textWidth/2;
            var minY = this.canvas.height/2 - this.textSize/2;
            var data = this.ctx.getImageData(minX, minY, textWidth, this.textSize).data;
            var isBlank = true;
            for (var i=0; i<data.length; i++) {
                if (data[i] != 0) {
                isBlank = false;
                break;
                }
            }
                
            if (!isBlank) {
                var count = 0;
                var curr = 0;
                var num = 0;
                var x = 0;
                var y = 0;
                var w = Math.floor(textWidth);
                this.points = [];
                while (count < this.pointAmount) {
                while (curr == 0) {
                    num = Math.floor(Math.random() * data.length);
                    curr = data[num];
                }
                num = Math.floor(num / 4);
                x = w/2 - num%w;
                y = this.textSize/2 - Math.floor(num/w);
                this.points.push(this.makePoint(x,y,data[num*4],data[num*4 + 1],data[num*4 + 2],data[num*4 + 3]));
                curr = 0;
                count++;
                }
            }
        },
        makePoint(x,y,r,g,b,a) {
            let _this = this;
            let newPoint={};
            var angle = Math.random() * 6.28;
            newPoint.dest_x = x;
            newPoint.dest_y = y;
            newPoint.original_r = r;
            newPoint.original_g = g;
            newPoint.original_a = a;
            newPoint.x = this.canvasWidth/2 - x + (Math.random() - 0.5) * this.initialDisplacement;
            newPoint.y = this.canvasHeight/2 - y + (Math.random() - 0.5) * this.initialDisplacement;
            newPoint.velx = this.initialVelocity * Math.cos(angle);
            newPoint.vely = this.initialVelocity * Math.sin(angle);
            newPoint.target_x = this.canvasWidth/2 - x;
            newPoint.target_y = this.canvasHeight/2 - y;
            newPoint.r = r;
            newPoint.g = g;
            newPoint.b = b;
            newPoint.a = a;
           
            newPoint.getX = function() {
                return newPoint.x;
            }
            
            newPoint.getY = function() {
                return newPoint.y;
            }
            
            newPoint.resetTarget = function () {
                newPoint.target_x = _this.canvasWidth/2 - newPoint.dest_x;
                newPoint.target_y = _this.canvasHeight/2 - newPoint.dest_y;
            }
             
            newPoint.fleeFrom = function(x, y) {
                newPoint.velx -= ((_this.mouse.x - newPoint.x) * _this.fleeSpeed / 10);
                newPoint.vely -= ((_this.mouse.y - newPoint.y) * _this.fleeSpeed / 10);
            }
            
            newPoint.settleTo = function(x, y) {
                newPoint.velx += ((newPoint.target_x - newPoint.x) * _this.settleSpeed / 100);
                newPoint.vely += ((newPoint.target_y - newPoint.y) * _this.settleSpeed / 100);
                newPoint.velx -= newPoint.velx * (1-_this.velocityRetenTion);
                newPoint.vely -= newPoint.vely * (1-_this.velocityRetenTion);
            }
            
            newPoint.scatter = function() {
                var unit = newPoint.unitVecToMouse();
                var vel = _this.scatterVelocity * 10 * (0.5 + Math.random() / 2);
                newPoint.velx = -unit.x * vel;
                newPoint.vely = -unit.y * vel;
            }
            
            newPoint.move = function() {
                
                if (newPoint.distanceToMouse() <= _this.fleeDistance) {
                    newPoint.fleeFrom(_this.mouse.x, _this.mouse.y);
                }
                else {
                    newPoint.settleTo(_this.target_x, _this.target_y);
                }
                
                if (newPoint.x + newPoint.velx < 0 || newPoint.x + newPoint.velx >= _this.canvasWidth) {
                newPoint.velx *= -1;
                }
                if (newPoint.y + newPoint.vely < 0 || newPoint.y + newPoint.vely >= _this.canvasHeight) {
                newPoint.vely *= -1;
                }
                
                newPoint.x += newPoint.velx;
                newPoint.y += newPoint.vely;
            }
            
            newPoint.distanceToTarget = function() {
                return newPoint.distanceTo(newPoint.target_x, newPoint.target_y);
            }
            
            newPoint.distanceToMouse = function() {
                return newPoint.distanceTo(_this.mouse.x, _this.mouse.y);
            }
            
            newPoint.distanceTo = function(x, y) {
                return Math.sqrt((x - newPoint.x)*(x - newPoint.x) + (y - newPoint.y)*(y - newPoint.y));
            }
            
            newPoint.unitVecToTarget = function() {
                return newPoint.unitVecTo(newPoint.target_x, newPoint.target_y);
            }
            
            newPoint.unitVecToMouse = function() {
                return newPoint.unitVecTo(_this.mouse.x, _this.mouse.y);
            }
            
            newPoint.unitVecTo = function(x, y) {
                var dx = x - newPoint.x;
                var dy = y - newPoint.y;
                return {
                x: dx / Math.sqrt(dx*dx + dy*dy),
                y: dy / Math.sqrt(dx*dx + dy*dy)
                };
            }
            return newPoint;
        },
        animate() {
            this.update();
            this.draw();
        },
        update() {
            var point;
            for (var i=0; i<this.points.length; i++) {
                point = this.points[i];
                point.move();
            }
        },
        draw() {
            this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
            
            var point;
            for (var i=0; i<this.points.length; i++) {
                point = this.points[i];
                this.ctx.fillStyle = "rgba("+point.r+","+point.g+","+point.b+","+point.a+")";
                this.ctx.beginPath();
                this.ctx.arc(point.getX(),point.getY(),this.size,0,2*Math.PI);
                this.ctx.fill();
            }
            
            window.requestAnimationFrame(this.animate);
        },
        //点击
        scatter(){
            let _this = this;
            if(this.isMouseMoveAnimation){
                window.addEventListener("click", function(event) {
                    _this.mouse.x = event.clientX;
                    _this.mouse.y = event.clientY;
                    for (var i=0; i<_this.points.length; i++) {
                        _this.points[i].scatter();
                    }
                });
            }
        },
        // 鼠标移动
        flee(){
            let _this = this;
            if(this.isClickAnimation){
                window.addEventListener("mousemove", function(event) {
                    _this.mouse.x = event.clientX;
                    _this.mouse.y = event.clientY;
                });
            }
        }
        
    },
    mounted(){
        this.canvas = document.getElementById("praticle-text");
        this.ctx = this.canvas.getContext("2d");
        this.canvas.height = this.canvasHeight;
        this.canvas.width = this.canvasWidth;
        this.adjustText();
        window.requestAnimationFrame(this.animate);
        this.scatter();
        this.flee();
    },
}
</script>
芭拉拉小魔仙
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue h5移动端使用canvas实现手写签名并生成png图片，支持修改画笔颜色和画笔粗细，画布颜色及宽高（附完整代码）
Qiang1455155765的博客
08-20 2439
vue h5移动端使用canvas实现手写签名并生成png图片，支持修改画笔颜色和画笔粗细，画布颜色及宽高（附完整代码）
CSS文本粒子动画特效之爱心粒子文字特效-Canvas
最新发布
misschengispink的博客
05-28 561
html+css+js，采用canvas实现爱心文本粒子动画特效，炫酷特效，素材和完整代码都有~快拿去表白~
Vue实现文字自动打点自动添加title气泡效果
ZHZS123的博客
04-23 592
需求是这样的,表格中有一列信息,字符长度有短有长,最大宽度限制在300px,溢出自动打点,但是又不想因此导致用户看不全信息,就想在文字溢出打点的时候出现一个悬浮效果,展示出全部的字段,同时对已经展示完全的字段不进行此操作,原本想通过bubble气泡组件来实现,但是在大量数据面前,这种组件的性能开销过大,最后决定利用html当中现有的title 属性进行悬浮内容的展示.
vue canvas 粒子拼图特效
03-18
基于vue canvas 的动态拼图效果 环境： vue node 使用：npm install 或 cnpm install npm run serve
基于HTML5 SVG炫酷文字爆炸特效
weixin_33943347的博客
02-11 544
这是一款使用html5 svg、css3和js制作的炫酷文字爆炸特效。该文字特效用SVG path属性将文字路径切割为很多小块，然后使用css3和js在鼠标滑过文字时制作文字爆炸分裂的炫酷效果。 在线预览   源码下载 这是一款使用html5 svg、css3和js制作的炫酷文字爆炸特效。不论是HTML还是CSS都没有能力将文字分割成小块，但是SVG可以实现这个效果。 制作SVG文字 ...
canvas 文字颜色_在知识的海洋狗刨，使用canvas绘制标签
weixin_39728124的博客
11-23 64
下面总结了一些canvas绘制标签的心得体会，希望能够对你有所帮助。绘制圆弧<canvas id="canvas" width="300" height="300" ref="canvas">canvas>varcanvas=document.getElementById('canvas');var ctx = canvas.getContext('2d');ct...
Vue文字加载闪烁的两种解决方式
m0_37780367的博客
04-15 2605
文字加载闪烁的两种解决方式 <p v-cloak> {{ msg }} </p> <h4 v-text = "msg"></h4> 默认v-text是没有闪烁问题的； v-text会覆盖元素中原本的内容，但插值表达式指挥替换自己的这个占位符，不会把整个元素的内容清空 ...
封装canvas各种方法的vue组件
09-07
在本例中，“封装canvas各种方法的vue组件”意味着开发者已经将常见的Canvas操作（如绘图、文字处理等）封装在一个自定义的Vue组件里，方便在项目中多次使用，提高了代码的复用性和可维护性。 其次，`Canvas API`...
粒子动效全屏背景
09-20
在本文中，我们将深入探讨如何使用HTML5的Canvas API实现粒子动效全屏背景。Canvas是Web开发中一个强大的工具，允许开发者通过JavaScript绘制出丰富的2D图形和动画。在这个项目中，我们将创建一个粒子系统，粒子之间...
vue渲染动效数字组件
10-26
# 渲染动效数字组件说明 >引入 ShowNumber 方法 ```javascript import ShowNumber from '@/components/Number' ``` >获取列表组件操作 ```javascript new ShowNumber(dom).init(); ``` # new ShowNumber(dom).init...
HTML5 Canvas粒子效果文字动画特效
07-18
HTML5 Canvas粒子效果文字动画特效.HTML5 Canvas粒子效果文字动画特效
canvas中普通动效与粒子动效的实现代码示例
12-02
本文将探讨如何在`canvas`中实现两种不同的动效：普通动效（以时钟为例）和粒子动效。 首先，我们来看普通动效的实现。在`canvas`中，我们可以利用API如`beginPath()`, `strokeStyle`, `lineWidth`, `rotate()`, `...
Vue使用Canvas绘制图片、矩形、线条、文字，下载图片
web前端开发
03-08 7114
来源 |https://segmentfault.com/a/11900000189938331、前言1.1 、业务场景图片储存在后台中，根据图片的地址，在vue页面中，查看图片，并...
Vue中利用canvas添加炫动背景
weixin_43529968的博客
05-15 3767
1.展示页面 <template> <div id="main"> <canvas id="myCanvas"></canvas> </div> </template> 2.绘制canvas图像，并设置为背景 mounted(){ //绘制canvas图像 this.getCanvas(); //设置canvas图像为背景 document.getElementById('main').style.backgrou
Vue——利用canvas在图片上加上文字
weixin_42164004的博客
04-22 9327
<template> <div> <img src="" alt="" id="newimage" style="width:278px;height:298px"> <canvas id="canvas" width="278" height="298"> </canvas> </div> </t
vue canvas应用 —— 页面文字内容生成一张图片
且听风吟的博客
11-17 2472
根据页面文字内容生成一张图片（1）首先，安装 html2canvas 库：（2）页面中引入：（3）具体使用： 遇到了一需求，根据页面内容，生成一张图片，网上查找了相关资料，可以用html2canvas来实现。具体实现如下： （1）首先，安装 html2canvas 库： 引入方式： npm安装： npm install --save html2canvas yarn安装： yarn add html2canvas （2）页面中引入： import html2canvas from 'html2can
《每周一点canvas动画》—— 文字粒子
weixin_34101784的博客
06-13 278
代码文件 每周一点canvas动画系列文章目前已经更新了12篇，今天给大家发个福利。我们使用canvas来制作一个小的效果。这个小效果是我从codePen上看到的，我对其做了些修改增强，添加了一些新的功能。UI界面就如下图中看到的样子。我们要实现的效果就如我在图中操作的那样，在输入框中输入文字（不管中文，还是英文，还是各种表情也好）都可以...
基于canvas使用粒子拼出你想要的文字
一只
12-13 5145
写在最前本次分享一下使用canvas实现粒子效果拼出你想要的文字。欢迎关注我的博客，不定期更新中——起因不久之前看到大搜车团队出品的easy mock产品的界面中有一个使用粒子拼出“mock so easy”的效果，感觉非常有意思，就像下面这样： 当然了，这个easy mock的界面中还有粒子汇聚、散开、以及缓动等效果，这些在之后的文章中会不定时的更新实现思路。我当时看到这个效果的时候是一段单
vue canvas组件
08-16
Vue Canvas 组件是一个用于在Vue应用中实现绘图功能的组件。它可以让你在HTML5的Canvas元素上进行绘图操作，包括绘制图形、添加文本、绘制路径等。 要创建一个Vue Canvas组件，首先需要在Vue应用中导入Canvas元素，并将其添加到组件的模板中。然后，可以通过在组件的方法中使用Canvas的API来执行绘图操作。 以下是一个简单的Vue Canvas组件的示例： ```vue <template> <div> <canvas ref="canvas"></canvas> </div> </template> <script> export default { mounted() { this.draw(); }, methods: { draw() { const canvas = this.$refs.canvas; const ctx = canvas.getContext('2d'); // 绘制一个矩形 ctx.fillStyle = 'red'; ctx.fillRect(50, 50, 100, 100); // 绘制一条线段 ctx.beginPath(); ctx.moveTo(200, 200); ctx.lineTo(300, 200); ctx.strokeStyle = 'blue'; ctx.lineWidth = 5; ctx.stroke(); // 添加文本 ctx.font = '24px sans-serif'; ctx.fillStyle = 'black'; ctx.fillText('Hello, Vue Canvas!', 50, 300); } } } </script> <style scoped> canvas { border: 1px solid black; } </style> ``` 在上面的示例中，我们在mounted钩子函数中调用了draw方法来执行绘图操作。draw方法通过获取canvas元素的上下文（context），使用上下文的API来绘制矩形、线段和文本。 注意，我们使用了Vue的ref属性来引用canvas元素，这样我们就可以在组件的JavaScript代码中轻松地访问canvas并进行绘图操作。 希望这个简单示例可以帮助你开始使用Vue Canvas组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值