建站
咨詢
售后
建站咨詢
新聞中心
本文轉(zhuǎn)載自微信公眾號(hào)「大帥老猿」，作者大帥搞全棧。轉(zhuǎn)載本文請(qǐng)聯(lián)系大帥老猿公眾號(hào)。
創(chuàng)新互聯(lián)建站是一家專業(yè)提供龍里企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、成都h5網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為龍里眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。
事情是這樣的，前天上午產(chǎn)品經(jīng)理說(shuō)想要做一個(gè)心愿墻，問(wèn)我能不能行
我心想，這太容易了，但為了多摸一天魚(yú)，我說(shuō)還是有點(diǎn)挑戰(zhàn)的 結(jié)果下午，產(chǎn)品經(jīng)理和設(shè)計(jì)師就給我發(fā)來(lái)了設(shè)計(jì)參考
image.png 他們說(shuō)，心愿墻的設(shè)計(jì)大致是這樣的，每個(gè)用戶的心愿都是一個(gè)氣泡，而客戶的品牌是”龍“，我們希望在前端頁(yè)面里用氣泡呈現(xiàn)一個(gè)龍形的設(shè)計(jì)，每個(gè)氣泡都會(huì)浮動(dòng)，鼠標(biāo)移上去變大，點(diǎn)擊后展示心愿詳情。 當(dāng)時(shí)我的內(nèi)心是這樣的
image.png
我摸魚(yú)的一天要泡湯了嗎?
誰(shuí)都不能阻止我摸魚(yú)
但首先要解決最核心的問(wèn)題
龍從哪里來(lái)?
設(shè)計(jì)師說(shuō)了，他可以給我一條由氣泡組成的龍的設(shè)計(jì)稿，我說(shuō)那等你設(shè)計(jì)稿給我，我再研究把。結(jié)果他說(shuō)，已經(jīng)有了，你就用這個(gè)吧
image.png
我的刀呢?
互動(dòng)問(wèn)題
請(qǐng)?jiān)谠u(píng)論區(qū)留下你遇到過(guò)的最奇葩的需求
拆解需求
遇到不靠譜的產(chǎn)品經(jīng)理和設(shè)計(jì)師，前端工程師真是慘。我們頂著最后交付成品的巨鍋，所有deadline感覺(jué)都只是用來(lái)壓榨前端工程師的。
我們只能靠自己，因?yàn)?/p>
誰(shuí)都不能阻止我摸魚(yú)
- 需求1：有鼠標(biāo)交互效果(太簡(jiǎn)單)
- 需求2：氣泡要浮動(dòng)(css動(dòng)畫(huà)，easy)
- 需求3：氣泡組成一條龍
此時(shí)我腦海里響起這首爛大街的歌
左邊跟我一起畫(huà)個(gè)龍，在你右邊畫(huà)一道彩虹~
誒，畫(huà)個(gè)龍
用什么畫(huà)，canvas
canvas能獲得指定區(qū)域的像素點(diǎn)陣
臥槽，有招兒了
代碼時(shí)間
先用圖片搜索找一張龍的剪影
image.png
image.png
將圖片繪制到canvas中
- 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);
- }
獲取并裁剪畫(huà)布的點(diǎn)陣信息
- 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);
- }
- }
- }
現(xiàn)在我們獲得了這樣一條龍的點(diǎn)陣信息
image.png
通過(guò)點(diǎn)陣信息生成氣泡dom
- 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);
- }
- }
- }
image.png
開(kāi)心摸魚(yú)吧
本例里使用div繪制大量的dom，僅為闡述思路，沒(méi)考慮性能。利用一些js游戲引擎，比如pixi等，可以很方便的全部交由canvas去繪制并添加交互。
原文鏈接：https://mp.weixin.qq.com/s/iE1vK6hA4IUYsNPpreTKew
標(biāo)題名稱：產(chǎn)品經(jīng)理：你能不能用Div給我畫(huà)條龍？
文章鏈接：http://www.5511xx.com/article/cccpgcj.html
