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

ccg
ccg 发布于 2017-01-11 19:32:27 浏览:630 类型:原创 - 教程 分类:JavaScript - canvas 二维码: 作者原创 版权保护
哈哈哈哈!!!当我说在写这边文章的时候,妹子已经追到了,哈哈哈哈哈!!!

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

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

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

具体实现

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

画字

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

    function draw () {
      ctx.clearRect(0, 0, CANVASWIDTH, CANVASHEIGHT)
      ctx.fillStyle = 'rgb(255, 255, 255)'
      ctx.textBaseline = 'middle'
      ctx.font = textSize + 'px 'Avenir', 'Helvetica Neue', 'Arial', 'sans-serif''
      ctx.fillText(text, (CANVASWIDTH - ctx.measureText(text).width) * 0.5, CANVASHEIGHT * 0.5)
   
      // 得到画布矩形的像素数据
      let imgData = ctx.getImageData(0, 0, CANVASWIDTH, CANVASHEIGHT)
      particleText(imgData)
    }
   
    function particleText (imgData) {
      // 点坐标获取
      var pxls = []      for (var w = CANVASWIDTH; w > 0; w -= 3) {
        for (var h = 0; h < CANVASHEIGHT; h += 3) {
          var index = (w + h * (CANVASWIDTH)) * 4
          if (imgData.data[index] > 1) {
            pxls.push([w, h])
          }
        }
      }
      
      // 略
    }

点的运动

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

星星闪烁效果

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

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

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

原文地址:https://hongguancheng.github.io/2017/01/11/romantic-words/

demo 演示:http://honggc.b0.upaiyun.com/romantic-words/index.html

github 地址:https://github.com/hongguancheng/romantic-words

背景地址:http://codepen.io/iamfrontender/details/yNVPeX
stars
z
给个赞 3 人点赞
收藏 5 人收藏
评论 已有 5 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最热评论
认真你就输了丶
认真你就输了丶2017-01-11 20:40:321F
首先得有一个目标呀emoticon
举报 支持 (1) 回复 (1)
最新评论
wy5201314
wy52013142017-01-16 16:24:115F
有这么简单吗??
举报 支持 (0) 回复 (0)
hugeannex
hugeannex2017-01-12 09:55:444F
如果这都能追到一个女孩 ,那我都泛滥了,骚年,别做梦了,快醒醒,不然又上班迟到了。
举报 支持 (0) 回复 (0)
一无所有
一无所有2017-01-12 09:02:063F
这个小男孩是不是limbo男主角啊.....
举报 支持 (0) 回复 (0)
ccg
ccg2017-01-11 21:45:052F
哈哈哈哈加油 //@认真你就输了丶:首先得有一个目标呀emoticon
举报 支持 (0) 回复 (0)
认真你就输了丶
认真你就输了丶2017-01-11 20:40:321F
首先得有一个目标呀emoticon
举报 支持 (1) 回复 (1)
ccg ccg 作者

作者最新