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

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

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

stars

当时我是在 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....

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

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

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<p><fontface>本程序基于新云网站管理系统V3.0.0.610修改美化,适合做文章、新闻、信息类综合网站,含6条采集规则,可自动抓取信息,因压缩包大小问题,删除生成的内容网页和文中图片,其余数据完整。</font></p> <p><fontface>采用新云系统成熟、稳定地技术ASP+Access/SQL修改而成,通过它,您可以很方便地管理自己网站。</font></p> <p><fontface>修改者声明:你可以任意修改程序,请保留我一个友情链接。 链接地址:http://www.ipaoniu.com/</font></p> <p><fontface>功能特点如下:(来自新云的官方说明)</font></p> <p><fontface>多频道管理,无限制频道克隆,支持频道二级域名绑定功能,文章内容自动分页;</font></p> <p><fontface>全站生成HTML页面;增加系统安全性,自由设置生成HTML文件扩展名和存放目录,内容自动分页。</font></p> <p><fontface>用户管理,多用户管理分权限发布、管理软件信息;用户短信、收藏功能,会员在线充值,网银在线支付;</font></p> <p><fontface>下载模块,支持计点会员和包月会员下载,反点等功能,无限制添加下载服务器,下载点数设置,添加软件只需要填写软件名称;</font></p> <p><fontface>强大的文章、软件采集功能,文章采集的同时可以选择是否下载图片到本地及分页采集; 其它模块,留言、友情连接自助申请,上传水印,内容关键字功能。</font></p> <p><fontface>后台登陆地址:/admin/admin_login.asp 默认管理员:admin 密码:ipaoniu</font></p>

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值