成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

手把手教你擼一個(gè)泡妞神奇

funnyZhang / 2595人閱讀

摘要：畫字首先我在畫布上畫了個(gè)點(diǎn)，用這些點(diǎn)來組成我們要顯示的字，用不到的字就隱藏起來。星星閃爍效果這個(gè)效果實(shí)現(xiàn)很簡單，就是讓星星不停的震動(dòng)，具體就是讓點(diǎn)的目的地坐標(biāo)不停的進(jìn)行小范圍的偏移。

哈哈哈哈?。?！當(dāng)我說在寫這邊文章的時(shí)候，妹子已經(jīng)追到了，哈哈哈哈哈?。。?/p>

其實(shí)東西是一年前寫的，妹子早就追到手了，當(dāng)時(shí)就是用這個(gè)東西來表白的咯，二話不說，先看效果（點(diǎn)擊屏幕可顯示下一句）

當(dāng)時(shí)我是在 codepan 上看到一個(gè)很漂亮的 pan，漫天星空，男孩獨(dú)自看著，當(dāng)時(shí)我就想如果可以把星星變成字就好了，于是就寫了字的那一部分，背景還是用原來的，寫完就用來表白了哈哈哈哈，效果怎么樣嘛~~~反正就是追到了，哇哈哈哈哈，接下來說說是怎么做的吧。

具體實(shí)現(xiàn)

相信好多人一看就知道應(yīng)該是用 canvas 做的了，具體做法就是在 canvas 畫很多很多的點(diǎn)，然后根據(jù)你要顯示的字準(zhǔn)確排列，最后實(shí)現(xiàn)最后的效果。

畫字

首先我在畫布上畫了 1200 個(gè)點(diǎn)，用這些點(diǎn)來組成我們要顯示的字，用不到的字就隱藏起來。在組成字之前我們需要知道每個(gè)點(diǎn)的具體的位置，這里的做法是首先在畫布上用 ctx.fillText() 先畫出我們要顯示的字，然后用 ctx.getImageData() 得到畫布上每個(gè)像素點(diǎn)的信息，在把這些像素點(diǎn)的信息轉(zhuǎn)化為我們每個(gè)點(diǎn)的坐標(biāo)，最后就能通過點(diǎn)來顯示我們的字了，具體看代碼：

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)

  // 得到畫布矩形的像素?cái)?shù)據(jù)
  let imgData = ctx.getImageData(0, 0, CANVASWIDTH, CANVASHEIGHT)
  particleText(imgData)
}

function particleText (imgData) {
  // 點(diǎn)坐標(biāo)獲取
  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])
      }
    }
  }
  
  // 略
}
點(diǎn)的運(yùn)動(dòng)

點(diǎn)在初始化的時(shí)候會(huì)被隨機(jī)分布到畫布的各個(gè)位置，在點(diǎn)的坐標(biāo)確定之后，就會(huì)讓點(diǎn)慢慢移動(dòng)到目的地，具體的做法是在每一幀中根據(jù)點(diǎn)的上一幀的位置和點(diǎn)的目的地位置計(jì)算得出在該幀中點(diǎn)的坐標(biāo)，讓點(diǎn)慢慢的移動(dòng)到目的地。

星星閃爍效果

這個(gè)效果實(shí)現(xiàn)很簡單，就是讓星星不停的震動(dòng)，具體就是讓點(diǎn)的目的地坐標(biāo)不停的進(jìn)行小范圍的偏移。具體請看代碼：

// 每次通過加上 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...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81175.html

相關(guān)文章

  • 手把手教你擼個(gè)vue2.0彈窗組件

    摘要：組件結(jié)構(gòu)同組件結(jié)構(gòu)通過方法獲取元素的大小及其相對于視口的位置，之后對提示信息進(jìn)行定位?？梢杂脕磉M(jìn)行一些復(fù)雜帶校驗(yàn)的彈窗信息展示，也可以只用于簡單信息的展示。可以通過屬性來顯示任意標(biāo)題，通過屬性來修改顯示區(qū)域的寬度。 手把手教你擼個(gè)vue2.0彈窗組件 在開始之前需要了解一下開發(fā)vue插件的前置知識(shí)，推薦先看一下vue官網(wǎng)的插件介紹 預(yù)覽地址 http://haogewudi.me/k...

    mrli2016 評論0 收藏0

  • 手把手教你擼個(gè)vue2.0彈窗組件

    摘要：組件結(jié)構(gòu)同組件結(jié)構(gòu)通過方法獲取元素的大小及其相對于視口的位置，之后對提示信息進(jìn)行定位?？梢杂脕磉M(jìn)行一些復(fù)雜帶校驗(yàn)的彈窗信息展示，也可以只用于簡單信息的展示?？梢酝ㄟ^屬性來顯示任意標(biāo)題，通過屬性來修改顯示區(qū)域的寬度。 手把手教你擼個(gè)vue2.0彈窗組件 在開始之前需要了解一下開發(fā)vue插件的前置知識(shí)，推薦先看一下vue官網(wǎng)的插件介紹 預(yù)覽地址 http://haogewudi.me/k...

    taoszu 評論0 收藏0

  • 手把手教你擼一個(gè)網(wǎng)頁聊天室

    摘要：前端邏輯搞定之后，思考一下這個(gè)聊天室的交互是怎么實(shí)現(xiàn)的。在前端監(jiān)聽一個(gè)事件，這個(gè)事件的觸發(fā)條件是成功和服務(wù)端建立連接。攜帶一個(gè)參數(shù)，即用戶的輸入。別人發(fā)送的消息現(xiàn)在就需要在前端建立一個(gè)響應(yīng)服務(wù)端有新消息的監(jiān)聽事件了。 一些廢話:) 最近在學(xué)校比較閑，終于有這么一塊時(shí)間可以自由支配了，所以內(nèi)心還是十分的酸爽舒暢的。當(dāng)然了，罪惡的事情也是有的，比如已經(jīng)連續(xù)一周沒有吃早飯了，其實(shí)現(xiàn)在回頭想想...

    nemo 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<