手把手教你擼一個泡妞神奇

funnyZhang 發布于2019-08-20 13:40 / 2588人閱讀

摘要：畫字首先我在畫布上畫了個點，用這些點來組成我們要顯示的字，用不到的字就隱藏起來。星星閃爍效果這個效果實現很簡單，就是讓星星不停的震動，具體就是讓點的目的地坐標不停的進行小范圍的偏移。

哈哈哈哈！！！當我說在寫這邊文章的時候，妹子已經追到了，哈哈哈哈哈！！！

其實東西是一年前寫的，妹子早就追到手了，當時就是用這個東西來表白的咯，二話不說，先看效果（點擊屏幕可顯示下一句）

當時我是在 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...

GPU云服務器云服務器手把手教你做圖像識別手把手教你阿里云服務器搭建商城一個神奇的網站一個教你開發小程序的小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81175.html

手把手教你擼個vue2.0彈窗組件

摘要：組件結構同組件結構通過方法獲取元素的大小及其相對于視口的位置，之后對提示信息進行定位。可以用來進行一些復雜帶校驗的彈窗信息展示，也可以只用于簡單信息的展示。可以通過屬性來顯示任意標題，通過屬性來修改顯示區域的寬度。手把手教你擼個vue2.0彈窗組件在開始之前需要了解一下開發vue插件的前置知識，推薦先看一下vue官網的插件介紹預覽地址 http://haogewudi.me/k...

mrli2016 2019-08-20 18:36 評論0 收藏0
手把手教你擼個vue2.0彈窗組件

摘要：組件結構同組件結構通過方法獲取元素的大小及其相對于視口的位置，之后對提示信息進行定位。可以用來進行一些復雜帶校驗的彈窗信息展示，也可以只用于簡單信息的展示。可以通過屬性來顯示任意標題，通過屬性來修改顯示區域的寬度。手把手教你擼個vue2.0彈窗組件在開始之前需要了解一下開發vue插件的前置知識，推薦先看一下vue官網的插件介紹預覽地址 http://haogewudi.me/k...

taoszu 2019-08-29 13:07 評論0 收藏0
手把手教你擼一個網頁聊天室

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

nemo 2019-08-20 12:34 評論0 收藏0