產品經理:你能不能用div給我畫條龍?
事情是這樣的,前天上午產品經理說想要做一個心願牆,問我能不能行
我心想,這太容易了,但為了多摸一天魚,我說還是有點挑戰的
結果下午,產品經理和設計師就給我發來了設計參考
他們說,心願牆的設計大致是這樣的,每個使用者的心願都是一個氣泡,而客戶的品牌是”龍“,我們希望在前端頁面裡用氣泡呈現一個龍形的設計,每個氣泡都會浮動,滑鼠移上去變大,點選後展示心願詳情。
當時我的內心是這樣的
我摸魚的一天要泡湯了嗎?
誰都不能阻止我摸魚
但首先要解決最核心的問題
龍從哪裡來?
設計師說了,他可以給我一條由氣泡組成的龍的設計稿,我說那等你設計稿給我,我再研究把。結果他說,已經有了,你就用這個吧
我的刀呢?
互動問題
請在評論區留下你遇到過的最奇葩的需求
拆解需求
遇到不靠譜的產品經理和設計師,前端工程師真是慘。我們頂著最後交付成品的巨鍋
,所有deadline
感覺都只是用來壓榨前端工程師的。
我們只能靠自己,因為
誰都不能阻止我摸魚
- 需求1:有滑鼠互動效果(太簡單)
- 需求2:氣泡要浮動(css動畫,easy)
- 需求3:氣泡組成一條龍
此時我腦海裡響起這首爛大街的歌
左邊跟我一起畫個龍,在你右邊畫一道彩虹~
誒,畫個龍
用什麼畫,canvas
canvas能獲得指定區域的畫素點陣
臥槽,有招兒了
程式碼時間
先用圖片搜尋找一張龍的剪影
將圖片繪製到canvas中
~~~javascript var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d");
var image = new Image(); image.src = "dragon.jpg"; image.onload = function(){ canvas.width = image.width; canvas.height = image.height;
ctx.drawImage(image,0,0);
} ~~~
獲取並裁剪畫布的點陣資訊
~~~javascript var imageData = ctx.getImageData(0,0,image.width,image.height).data; ctx.fillStyle = "#ffffff"; ctx.fillRect(0,0,image.width,image.height);
var gap = 6;
for (var h = 0; h < image.height; h+=gap) { for(var w = 0; w < image.width; w+=gap){ var position = (image.width * h + w) * 4; var r = imageData[position], g = imageData[position + 1], b = imageData[position + 2];
if(r+g+b==0){
ctx.fillStyle = "#000";
ctx.fillRect(w,h,4,4);
}
}
} ~~~
現在我們獲得了這樣一條龍的點陣資訊
通過點陣資訊生成氣泡dom
~~~javascript var dragonContainer = document.getElementById("container"); var dragonScale = 2;
for (var h = 0; h < image.height; h+=gap) { for(var w = 0; w < image.width; w+=gap){ var position = (image.width * h + w) * 4; var r = imageData[position], g = imageData[position + 1], b = imageData[position + 2];
if(r+g+b==0){
var bubble = document.createElement("img");
bubble.src = "bubble.png";
bubble.setAttribute("class","bubble");
var bubbleSize = Math.random()*10+20;
bubble.style.left = (w*dragonScale-bubbleSize/2) + "px";
bubble.style.top = (h*dragonScale-bubbleSize/2) + "px";
bubble.style.width = bubble.style.height = bubbleSize+"px";
bubble.style.animationDuration = Math.random()*6+4 + "s";
dragonContainer.appendChild(bubble);
}
}
} ~~~
開心摸魚吧
本例裡使用div繪製大量的dom,僅為闡述思路,沒考慮效能。利用一些js遊戲引擎,比如pixi等,可以很方便的全部交由canvas去繪製並新增互動。
本故事純屬虛構,參考案例來自本人2011年底為客戶開發的春節活動網站。
如果你喜歡大帥的教程,請收藏,點贊,關注吧
- 嗶哩嗶哩:
大帥老猿
- 微信公眾號:
大帥老猿
- 2022,38歲,裸辭,自由職業一年實況分享
- 太強了!外國小哥花16個月用Three.JS打造了一個無縫切地圖的3D開車遊戲
- 細節狂魔,用 JavaScript 復原何同學B站頭圖的創意
- 碼上摸金,用PIXI GSAP仿寫vanmoof剎車動效 | 猿創營
- 在uni-app中使用微軟的文字轉語音服務
- 萬馬奔騰隊的phaser3 戰疫小遊戲開發歷程回顧
- 用uni-app開發一個名為漢兜的遊戲
- 淺談對貪食蛇遊戲的一點微創新
- 手把手教你做iOS逆向分析,突破微信的群發多選數量限制
- 產品經理:你能不能用div給我畫條龍?
- 這個榜單我不服!終究還是錯付了這個綠茶掘金
- 前端摸魚神器,設計稿一鍵匯出 「小程式/Vue/Uni-app」程式碼
- 請收下這份原始碼,用Vue開發的一個“螞蟻森林澆水偷菜”遊戲
- 微信小程式統一分享,全域性接管頁面分享訊息的一些技巧
- 這45道面試可能被問到的JS判斷題!你能答對幾道?
- CSS邊玩邊學,這五個遊戲讓你對CSS的掌握更進一步!
- Web網站掃【小程式碼】登入的技術實現!記得收藏,要用時別找不到!
- 獻給所有技術內容創作者~猿創聚合助手小程式開發難點解析
- 花60秒給Vue3提的PR,竟然被尤大親自Merge了~
- 使用Vue開發“螞蟻森林澆水偷菜”遊戲的心得體會