使用canvas实现一个vue弹幕组件功能

2024-08-09 19:26:36

看B站时，对弹幕的实现产生了兴趣，一开始想到用css3动画去实现，后来感觉这样性能不是很好，查了下资料，发现可以用canvas实现，于是就摸索着写了一个简单的弹幕。

弹幕功能

支持动态添加弹幕
弹幕不重叠
自定义弹幕颜色

效果图

demo

源码地址

前端框架选了比较熟悉的vuejs

弹幕滚动的基本思路就是通过定时器不断地改变弹幕的位置，时时重绘画布。

实现步骤

先加入一个canvas标签，这里有个注意点，关于设备像素比对canvas的影响，会出现绘图模糊。

<canvas width="600" height="600"></canvas> // 如果单纯这样写，canvas会出现模糊
<canvas width="600" height="600" style="width: 300px;height: 300px">
</canvas>
//为了不出现模糊，需要设置canvas的css宽高为上下文宽高的1/devicePixelRatio，
本文是对于devicePixelRatio:2的设备设置的，该值可从window.devicePixelRatio取得。
<canvas ref="hiddenCanvas" width="0" height="0" style="display: none">
</canvas>
// 后面会用到

我们先定义一个数组来存放弹幕数据，一条弹幕信息，包括文本内容，x,y坐标位置，颜色，速度（可以是随机或者固定，为了计算简单，我们这里采用了固定的速度）

var dmArr = [];
var gap = 80; // 弹幕的上下间距
var hiddenCanvas = this.$refs.hiddenCanvas;
// 增加弹幕的方法
function pushDm(text, color) {
  let y = getY(); // 先确定跑道
  let x = 600; // 初始x坐标为canvas的右边界
  let delayWidth = 0; // 同跑道
  for (let i = 0, len = dmArr.length; i < len; i++) {
    let dm = dmArr[i];
    if (y === dm.y) { // 如果是同跑道,则往后排,设置一定的间隔，保证弹幕不会重叠；
      delayWidth += Math.floor(hiddenCanvas.getContext('2d').measureText(dm.text).width * 4 + 50);
    }  }
  dmArr.push({
    text: text,
    x: x + delayWidth,
    y: y,
    speed: 8,
    color: color || getColor()
  });
}
// 随机获得y坐标
function getY() {
  let range = Math.floor(600 / gap); // 跑道数量
  return Math.floor(Math.random() * range + 1) * gap;
}
// 随机获得颜色
function getColor() {
  return `${Math.floor(Math.random() * 16777215).toString(16)}`;
}
// 写一个for循环，初始化30条弹幕
for (let i = 0; i < 30; i++) {
  pushDm(`It's barrage ${i}`);
}

接下来设置一个20ms的定时器，实现弹幕滚动效果

var timer = null;
var ctx = this.$refs.canvas.getContext('2d');
function start(){
 timer = setInterval(() => {
  ctx.clearRect(0, 0, 600, 600); // 每次需要清空画布
  ctx.save();
  ctx.font = '30px Microsoft YaHei'; // 这里需要把字体大小设为需要显示的css大小的2倍（devicePixelRatio为2时）
  if (!dmArr.length) stop(); // 如果没有新弹幕了，就停止计时器
  for (let i = 0, len = this.dmArr.length; i < len; i++) {
    let dm = dmArr[i];
    let overRange = -ctx.measureText(dm.text).width * 2;
    dm.x -= dm.speed;
    if (dm.x < overRange) {
      dmArr.splice(i, 1); // 弹幕在画布中不可见时，从数组中移除该项
      continue;
    }
    ctx.fillStyle = `#${dm.color}`;
    ctx.fillText(dm.text, dm.x, dm.y);
  }
  ctx.restore();
 }, 20);
}
function stop() {
  clearInterval(timer);
  ctx.clearRect(0, 0, 600, 600);
}

我们还需要一个输入框，来实现手动添加弹幕功能

<input type="text" @keyup.enter="sent" v-model="dmInput" maxlength="20">

<button type="button" @click="sent">发表</button>
var dmInput = '';
var color = ''; // 可自定义弹幕的颜色
function sent() {
  if (!dmInput) return;
  stop();
  pushDm(dmInput, color);
  start();
  dmInput = '';
}

有待改进的地方和疑问？速度不恒定时，怎么保持弹幕不重叠视频弹幕是根据弹幕发送时间点来定位到视频的每一帧？如何实现？

总结

以上所述是小编给大家介绍的使用canvas实现一个vue弹幕组件功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

Vue中使用canvas方法总结

下面就是小编带给大家的Vue中怎么使用canvas方法操作,希望能够给你们带来一定的帮助,谢谢大家的观看. 1.如果数组中都是canvas对象, vue如何能吧canvas对象渲染到页面.v-html只能渲染出一个字符串, 没办法像appendChild那样插入canvas对象. 2.项目架构是vue-cli的单页应用,如果在index.html入口主文件里面引入<script src='html2canvas.js'></script>: 3.这样每个组件都会加载此js,造成资源
基于vue2的canvas时钟倒计时组件步骤解析

今天给大家介绍一款基于vue2的canvas时钟倒计时组件,这个时钟倒计时组件采用canvas动画的炫酷动画效果形式,根据剩余时间的多少变换颜色和旋转扇形的速度,适合抢购.拍卖.下注等业务场景,且对移动端友好. 具体步骤分析: 假如设定倒计时总时间为15s, 变黄色时机为10s,变红色时机为5s. 1.开始倒计时后颜色为绿色.绿色含义是:倒计时的时间离结束时间还很长. 2.10s后变黄色.黄色的含义是:倒计时的时间离结束时间挺近了,起警告作用.动画中,出现快速旋转的扇形. 3.5s后变红色.红色
vue 使用html2canvas将DOM转化为图片的方法

一.前言我发现将DOM转化为图片是一个非常常见的需求,而自己手动转是非常麻烦的,于是找到了html2canvas这个插件,既是用得比较多的也是维护得比较好的一个插件. 注意:版本比较多,这里介绍最新版二.代码 1. 安装 npm install html2canvas --save 现在最新的版本应该是1.0.0,另外还有一个比较经典的版本是0.5.0,网上有许多关于这个版本的bug说明. 2. 使用 <div class="imageWrapper" ref="i
基于vue+canvas的excel-like组件实例详解

a vue component,基于vue的表格组件,主要解决大数据量的表格渲染性能问题,使用canvas绘制表格,同时支持类似excel的批量选中,复制黏贴删除,实时编辑等功能. vue-grid-canvas Install NPM / Yarn Install the package: npm install vue-canvas-grid --save Then import it in your project import Vue from 'vue' import Grid fro
vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用）

前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给定合理的帧数,不断的清除画布,再重绘图形,即呈现出动画效果. 让我们先看下效果说明:此gif清晰度很低,因为转成gif图的时候,质量受损,帧数减少,所以倒计时转到红色时候看起来变的很模糊.但是实际在浏览器上效果全程都是很清晰和连贯的使用 npm npm install vue-canvas-co
Vue利用canvas实现移动端手写板的方法

本文介绍了Vue利用canvas实现移动端手写板的方法,分享给大家,具体如下: <template> <div class="hello">  <button type="" v-on:click="clear">清除</button> <button v-on:click=&quo
vue实现pdf导出解决生成canvas模糊等问题(推荐)

最近公司项目需要,利用vue实现pdf导出,从而保存到本地打印出来,说起来好像也很容易,具体要怎么实现呢? 1 .我们要添加两个模块 1 第一个.将页面html转换成图片 2 npm install --save html2canvas 3 第二个.将图片生成pdf 4 npm install jspdf --save 2 .定义全局函数 .. 创建一个htmlToPdf .js 文件在指定位置 . 我个人习惯放在 ( ' src /utils/htmlToPdf' ) // 导出页面为PDF
使用canvas实现一个vue弹幕组件功能

看B站时,对弹幕的实现产生了兴趣,一开始想到用css3动画去实现,后来感觉这样性能不是很好,查了下资料,发现可以用canvas实现,于是就摸索着写了一个简单的弹幕. 弹幕功能支持动态添加弹幕弹幕不重叠自定义弹幕颜色效果图 demo 源码地址前端框架选了比较熟悉的vuejs 弹幕滚动的基本思路就是通过定时器不断地改变弹幕的位置,时时重绘画布. 实现步骤先加入一个canvas标签,这里有个注意点,关于设备像素比对canvas的影响,会出现绘图模糊. <canvas width="6
Vue 实现一个命令式弹窗组件功能

前言在日常工作中弹窗组件是很常用的组件,但用得多还是别人的,空闲时间就自己来简单实现一个弹窗组件涉及知识点:extend.$mount.$el 使用方式: this.$Confirm({ title:'自定义标题' }).then(res=>{ console.log(res) }) 目录结构 index.vue:组件布局.样式.交互逻辑 index.js:挂载组件.暴露方法知识点在此之前,了解下涉及的知识点 1. extend 使用这个api,可以将引入的vue组件变成vue构造函数,
微信小程序canvas拖拽、截图组件功能

先看下微信小程序canvas拖拽功能组件地址 github.com/jasondu/wx-- readme近期补上实现效果如何实现使用canvas 使用movable-view标签由于movable-view无法实现旋转,所以选择使用canvas 需要解决的问题如何将多个元素渲染到canvas上如何知道手指在元素上.如果多个元素重叠如何知道哪个元素在最上层如何实现拖拽元素如何缩放.旋转.删除元素看起来挺简单的嘛,就把上面这几个问题解决了,就可以实现功能了:接下来我们一一解决.
100行代码实现一个vue分页组功能

今天用vue来实现一个分页组件,总体来说,vue实现比较简单,样式部分模仿了elementUI.所有代码的源码可以再github上下载的到:下载地址先来看一下实现效果: 点击查看效果整体思路我们先看一下使用到的文件的目录: 我们在 pageComponentsTest.vue 页面引入了 pageComponent.vue 分页组件.整体思路是通过 props 来达到组件的灵活通用的效果,整体语法是使用vue的VM语法. pageComponent.vue实现首先实现一个分页,需要知道数
详解如何制作并发布一个vue的组件的npm包

前提:1.会vue基础,以及vue的组件(官网:https://cn.vuejs.org/v2/guide/components.html)相关的基础. 因为本文主要是讲如何把一个vue组件做成npm包并发布. 分为2大步骤: 一.按照相应格式写我们的vue代码(就如同写一个jquery插件时.有其固定的格式一样). 二.发布到npm上的流程一.书写一个vue组件不用脚手架,我们自己从头开始做起,因为脚手架会附带很多没用的东西. 就做一个最简单的vue组件:就是传入用户名字,页面打印出'he
如何抽象一个Vue公共组件

之前一直想写一篇关于抽象 Vue 组件的随笔,无奈一直没想到好的例子.恰巧最近为公司项目做了一个数字键盘的组件,于是就以这个为例聊聊如何抽象 Vue 的组件. 先上 Demo 与源码.(demo最好在浏览器里以手机模式浏览) 在讲具体实现前,我想先分享下自己认为的理想的公用组件是什么样的: 1. 黑盒性,即除了你自己以外,其他的开发者在快速阅读使用文档之后可以立刻上手,而不用关心你的内部实现: 2. 独立性,即做好解耦,不与父组件有过多关联: 3 自定义性,适当地暴露一些输入接口或者方法给外部
写一个Vue Popup组件

组件长这样主要有标题.内容.按钮个数.按钮颜色.按钮文案这些可配置项期望的调用方式一不需要等待用户二次确认 import Modal from 'common/components/modal' handleModal() { Modal({ title: '赚取收益?', content: '根据您的授权金额和计息天数计算得出(还未到账).实际以到账金额为准.', confirmText: '我知道了' }) } 期望的调用方式二需要等待用户二次确认 import Modal from
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)

一.搭建项目以及初始化配置 vue create ts_vue_btn 这里使用了vue CLI3自定义选择的服务,我选择了ts.stylus等工具.然后创建完项目之后,进入项目.使用快捷命令code .进入Vs code编辑器(如果没有code .,需要将编辑器的bin文件目录地址放到环境变量的path中).然后,我进入编辑器之后,进入设置工作区,随便设置一个参数,这里比如推荐设置字号,点下.这里是为了生成.vscode文件夹,里面有个json文件. 我们在开发项目的时候,项目文件夹内的文件很
vue上传图片组件编写代码

本文实例教大家如何编写一个vue上传图片组件,具体如下 1.首先得有一个[type=file]文件标签并且隐藏,changge事件来获取图片: <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/> 2.触发隐藏的文件标签:(通过原生的click来触发) document.ge
vue 计时器组件的实现代码

整理文档,搜刮出一个vue 计时器组件的代码,稍微整理精简一下做下分享. <template> <div> <span :sendSync="sendSync" :autoStart="autoStart" :defaultVal="defaultVal" >{{countString}}</span> </div> </template> <script> ex

使用canvas实现一个vue弹幕组件功能

相关推荐

随机推荐