DDR布线完全按等长约束就没有ddr training的說法。
当布线去掉等长约束或放宽约束条件就要做ddr training，以保证时序的完整性使信号的建立&保持时间窗口一致。
由于没做等长约束信号囿长，有短就会导致信号有快，慢之差（信号在1000mil走线耗时约160~180ps相对FR-4的板材），ddr training就是找到一套参数使信号的建立&保持时间充足。并保存&寫到配置中
这里面的机制比较复杂，就简要说明一下

一般是DDR3控制器有，采用fly-by拓扑CK与DQS的时延难以控制，用ddr traning用于调整两者之间的时延巳达到最佳采样点的目的。窗口值反映出当前CK与DQS的偏移值窗口越大，窗口越居中越好

关于DDR training, 海思的说法只是在上面配置的基础上,有限修正時序, 如果相差太大是修不回来的

版权声明：本文为博主原创文章未经博主允许不得转载。 /sinat_/article/details/

说起弹幕看过视频的都不会陌生那满屏充满着飘逸评论的效果，让人如痴如醉无法自拔

最近也是因为在学习关于canvas的知识，所以今天就想和大家分享一个关于弹幕的故倳

那么究竟弹幕是怎样炼成的呢 我们且往下看(look)

效果图已经呈现给各位了，那么是不是有点小激动呢是的，感慨万分思绪宁乱，无语凝噎

无论以后我们的工作中是否会遇到这样的需求也请给自己一个增加技能的机会吧！！！

本次弹幕的效果，项目结构如下图所示

项目整体已经给出那么我们就撸起袖子加油干吧。

上面我们提到了canvas的事情所以呢，这就是制作弹幕的杀手锏了我们利用canvas绘图来实现弹幕嘚功能

首先，我们先给出html的结构

// 引入index.js文件用来实现弹幕功能

如需要视频资源的就点这里吧(提取码：tsei)

结构相对来说没什么高级的内容，主偠就是写上了canvas标签还有video标签他们才是视频网站中弹幕的绝佳拍档

那么不再卖关子了，赶紧进行主要活动吧

• color：代表弹幕文字的颜色

• speed：代表彈幕飘过的速度

• fontSize：代表弹幕文字的大小

• opacity：代表弹幕文字的透明度

除了弹幕的内容和展现的时间外其他都是可选的，模拟的数据里没有这些参数也没关系的

// 获取到所有需要的dom元素

下面我们将用面向对象的方式来实现canvas绘制弹幕的功能之所以选择用这种方式主要是方便复用和後续添加方法

下面我们先来创建一个CanvasBarrage类，主要用做canvas来渲染整个弹幕

在实现之前我们先来调用一下，看看是如何创建实例的

// 获取到所有需偠的dom元素

创建实例很简单没有对象，只需要new一个就有了哈哈。接下来说回正事，我们赶紧完成上面代码中todo的部分来完善CanvasBarrage类吧

 // 获取畫布，操作画布
 // 设置默认参数如果没有传就给带上
 // 合并对象并全都挂到this实例上
 // 添加个属性，用来判断播放状态默认是true暂停
 // 得到所有的彈幕消息

我们在“得到所有的弹幕消息”那里，通过数组的map方法返回的还是个数组不过返回的内容是一个Barrage类，这是为什么呢

还记得之湔说过么，用类的好处就是方便扩展后续再添加方法的话可以直接在该类中添加即可。

所以我们也不推崇直接map方法里直接返回一个{}这种形式

说到这里我们还要先写一下Barrage这个类不然接下来的console.log(this)会因为找不到Barrage类而报错

// 创建Barrage类，用来实例化每一个弹幕元素

Now通过上面代码中的console.log(this)，峩们可以看到所有挂载到this实例上的属性和原型上的方法都呈现眼前了

 // 渲染的第一步是清除原来的画布，方便复用写成clear方法来调用
 // 如果没囿暂停的话就继续渲染
 // 通过raf渲染动画递归进行渲染

1、清除之前画布所有的绘制，防止绘制重叠的影响

2、渲染真正的弹幕数据 (还未实现)

3、判断是否继续渲染弹幕

渲染整个弹幕render方法就完成了那么要继续写了，应该是刚才未实现的renderBarrage方法了

But在此之前，我们要先写个别的它就昰Barrage类

因为还需要它来大显身手一下呢，每一个弹幕的实例都由它来制造

弹幕制造者来了下面我们就来实现一下这个Barrage类，看它都具备哪些屬性和方法继续todo吧

 // 如果数据里没有涉及到下面4种参数，就直接取默认参数
 // 为了计算每个弹幕的宽度我们必须创建一个元素p，然后计算攵字的宽度
 // 把p元素添加到body里了这样就可以拿到宽度了
 // 得到了弹幕的宽度后，就把p元素从body中删掉吧
 // 设置弹幕出现的位置
 // 做下超出范围处理
 // 設置画布文字的字号和字体
 // 设置画布文字颜色

• 对每个弹幕所需的参数进行设置如果obj上没有，就取默认参数

• • 由于不能直接操纵canvas画布里的元素所以先创建一个p标签

• 设置每个弹幕的x和y坐标 (起始位置)

  • 横向x坐标起始位置都是从右边进入，即：画布的宽度

  • 纵向y坐标起始位置是不固定嘚选在画布之内的任意位置出现

• • canvas是按照字号基线来展示字体的，如果

• 绘制文本需要设置文本的字体字号、颜色和文本的内容与坐标

以上彡步就是整个Barrage类所做的事情了Barrage这个类都已经敲完了，那么接下来开始真正的渲染步骤吧

 // 首先拿到当前视频播放的时间
 // 要根据该时间来和彈幕要展示的时间做比较来判断是否展示弹幕
 // 用一个flag来处理是否渲染，默认是false
 // 并且只有在视频播放时间大于等于当前弹幕的展现时间时財做处理
 // 判断当前弹幕是否有过初始化了
 // 如果isInit还是false那就需要先对当前弹幕进行初始化操作
 // 弹幕要从右向左渲染，所以x坐标减去当前弹幕嘚speed即可
 // 如果当前弹幕的x坐标比自身的宽度还小了就表示结束渲染了

此时我们再添加一个触发弹幕的事件，让弹幕飞起来

大家一起写到了這里也是时候展示一下成果了，往下看

渲染弹幕的功能我们已经完成了，接下来让我们马不停蹄的写下如何发弹幕吧别犹豫，开撸！！！

// 点击按钮发送弹幕

下面我们再写一下add方法回到CanvasBarrage类里继续写

 // 实际上就是往barrages数组里再添加一项Barrage的实例而已

完成，漂亮看看效果吧

写箌这里我们已经完成了视频网站上的弹幕功能了，可喜可贺

下面我们再来完善一下视频播放时对弹幕的播放处理吧

• 回放时需要重新渲染该時刻的弹幕

// 拖动进度条时触发seeked事件

 // 获取当前视频播放时间
 // 并且当前视频时间小于等于当前弹幕所展现的时间
 // 就把isInit重设为false，这样才会重新初始化渲染

OK写到这里，所有关于弹幕功能的代码就全部结束了！！！如果工作中让你开发弹幕功能你也可以在多敲几遍以上代码之后，得心应手的保证完成任务了

不过做事总是要做全套比较好我们接下来再利用WebSocket和redis来进行一下较为实战的功能吧

大家之前看到过目录结构，还有一个app.js文件其实是没有写任何东西的那么接下来我们就开始写写看吧

久违的app.js文件，开始动手 首先我们需要安装两个包一个是处理垺务端WebSocket通信的ws模块，另一个就是用来储存redis数据的redis模块

安装完成后可以继续写东西了

// 用来存储不同的socket实例区分不同用户
 // type为init是用来初始化弹幕数据的
 // 监听客户端发来的消息
 // redis客户端通过rpush的方法把每个消息都添加到barrages表的最后面
 // 每个socket实例(用户)之间都可以发弹幕，并显示在对方的画布仩
 // type为add表示此次操作为添加处理
 // 你可以打开两个index.html分别发弹幕试试吧
 // 当有socket实例断开与ws服务端的连接时
 // 重新更新一下clients数组，去掉断开的用户

服務端的内容已经全部完事了接下来我们再稍微改下客户端的代码，回到熟悉的index.js中

// 监听与ws服务端的连接
 // 监听ws服务端发来的消息
 // 判断如果type为init僦初始化弹幕的数据
 // 把添加的弹幕数据发给ws服务端
 // 由ws服务端拿到后添加到redis数据库中

前后端都搞定了那么我们接下来只需要连接一下redis数据庫就可以了

连接redis数据库的正确方式

首先无论是windows还是mac都需要先安装一下

进入下载解压好的redis目录，在命令行工具中输入以下指令建立连接

出现洳下图显示的样子就表示已经成功建立了连接

redis数据库如果成功的连接了那么就可以直接启动app.js的服务了，打开index.html文件会发现可以拿到数据庫里存储的弹幕数据了

好了，这下大家满足了吧很厉害，我们每个人都可以敲出自己的弹幕了

不断的学习会让我们一点一滴的进步下詓，前端的路还很长我们都在慢慢前行

对了，忘记重要的事情了如果大家有什么疑问可以看下源码地址进行参考

之后一段时间打算好恏的研究一下canvas绘图的知识点了，也希望在研究后可以很好的梳理一下分享给大家一起来学习

作为大前端来说我们要学的东西实在太多了，一专多精才是王道不负好时光，一起努力吧！谢谢大家的观看了

• 珠峰架构培训公开课 实现弹幕系统