资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/手把手教你撸一个泡妞神奇

手把手教你撸一个泡妞神奇

funnyZhang / 2633人阅读

摘要：画字首先我在画布上画了个点，用这些点来组成我们要显示的字，用不到的字就隐藏起来。星星闪烁效果这个效果实现很简单，就是让星星不停的震动，具体就是让点的目的地坐标不停的进行小范围的偏移。

哈哈哈哈！！！当我说在写这边文章的时候，妹子已经追到了，哈哈哈哈哈！！！

其实东西是一年前写的，妹子早就追到手了，当时就是用这个东西来表白的咯，二话不说，先看效果（点击屏幕可显示下一句）

当时我是在 codepan 上看到一个很漂亮的 pan，漫天星空，男孩独自看着，当时我就想如果可以把星星变成字就好了，于是就写了字的那一部分，背景还是用原来的，写完就用来表白了哈哈哈哈，效果怎么样嘛~~~反正就是追到了，哇哈哈哈哈，接下来说说是怎么做的吧。

具体实现

相信好多人一看就知道应该是用 canvas 做的了，具体做法就是在 canvas 画很多很多的点，然后根据你要显示的字准确排列，最后实现最后的效果。

画字

首先我在画布上画了 1200 个点，用这些点来组成我们要显示的字，用不到的字就隐藏起来。在组成字之前我们需要知道每个点的具体的位置，这里的做法是首先在画布上用 ctx.fillText() 先画出我们要显示的字，然后用 ctx.getImageData() 得到画布上每个像素点的信息，在把这些像素点的信息转化为我们每个点的坐标，最后就能通过点来显示我们的字了，具体看代码：

</>复制代码 
  1. function draw () {
  2.   ctx.clearRect(0, 0, CANVASWIDTH, CANVASHEIGHT)
  3.   ctx.fillStyle = "rgb(255, 255, 255)"
  4.   ctx.textBaseline = "middle"
  5.   ctx.font = textSize + "px "Avenir", "Helvetica Neue", "Arial", "sans-serif""
  6.   ctx.fillText(text, (CANVASWIDTH - ctx.measureText(text).width) * 0.5, CANVASHEIGHT * 0.5)
  7.   // 得到画布矩形的像素数据
  8.   let imgData = ctx.getImageData(0, 0, CANVASWIDTH, CANVASHEIGHT)
  9.   particleText(imgData)
  10. }
  11. function particleText (imgData) {
  12.   // 点坐标获取
  13.   var pxls = []
  14.   for (var w = CANVASWIDTH; w > 0; w -= 3) {
  15.     for (var h = 0; h < CANVASHEIGHT; h += 3) {
  16.       var index = (w + h * (CANVASWIDTH)) * 4
  17.       if (imgData.data[index] > 1) {
  18.         pxls.push([w, h])
  19.       }
  20.     }
  21.   }
  22.   
  23.   // 略
  24. }
点的运动

点在初始化的时候会被随机分布到画布的各个位置，在点的坐标确定之后，就会让点慢慢移动到目的地，具体的做法是在每一帧中根据点的上一帧的位置和点的目的地位置计算得出在该帧中点的坐标，让点慢慢的移动到目的地。

星星闪烁效果

这个效果实现很简单，就是让星星不停的震动，具体就是让点的目的地坐标不停的进行小范围的偏移。具体请看代码：

</>复制代码 
  1. // 每次通过加上 Math.random() * 15 对目的地做偏移/
  2. X = pxls[i - 1][0] - p.px + Math.random() * 15
  3. Y = pxls[i - 1][1] - p.py + Math.random() * 15

代码都放到了 github 上了，祝大家表白成功哈哈哈哈。

原文地址：https://hongguancheng.github....

demo 演示：http://honggc.b0.upaiyun.com/...

github 地址：https://github.com/hongguanch...

背景地址：http://codepen.io/iamfrontend...

云服务器 GPU云服务器 手把手教你做图像识别 手把手教你阿里云服务器搭建商城 一个神奇的网站 一个教你开发小程序的小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81175.html

相关文章

  • 手把手教你撸个vue2.0弹窗组件

    摘要：组件结构同组件结构通过方法获取元素的大小及其相对于视口的位置，之后对提示信息进行定位。可以用来进行一些复杂带校验的弹窗信息展示，也可以只用于简单信息的展示。可以通过属性来显示任意标题，通过属性来修改显示区域的宽度。 手把手教你撸个vue2.0弹窗组件 在开始之前需要了解一下开发vue插件的前置知识，推荐先看一下vue官网的插件介绍 预览地址 http://haogewudi.me/k...

    mrli2016 评论0 收藏0

  • 手把手教你撸个vue2.0弹窗组件

    摘要：组件结构同组件结构通过方法获取元素的大小及其相对于视口的位置，之后对提示信息进行定位。可以用来进行一些复杂带校验的弹窗信息展示，也可以只用于简单信息的展示。可以通过属性来显示任意标题，通过属性来修改显示区域的宽度。 手把手教你撸个vue2.0弹窗组件 在开始之前需要了解一下开发vue插件的前置知识，推荐先看一下vue官网的插件介绍 预览地址 http://haogewudi.me/k...

    taoszu 评论0 收藏0

  • 手把手教你撸一个网页聊天室

    摘要：前端逻辑搞定之后，思考一下这个聊天室的交互是怎么实现的。在前端监听一个事件，这个事件的触发条件是成功和服务端建立连接。携带一个参数，即用户的输入。别人发送的消息现在就需要在前端建立一个响应服务端有新消息的监听事件了。 一些废话:) 最近在学校比较闲，终于有这么一块时间可以自由支配了，所以内心还是十分的酸爽舒畅的。当然了，罪恶的事情也是有的，比如已经连续一周没有吃早饭了，其实现在回头想想...

    nemo 评论0 收藏0

发表评论

登陆后可评论

0条评论

funnyZhang

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<