本文轉(zhuǎn)載自微信公眾號「大帥老猿」，作者大帥搞全棧。轉(zhuǎn)載本文請聯(lián)系大帥老猿公眾號。

創(chuàng)新互聯(lián)建站是一家專業(yè)提供龍里企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計、成都網(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)理說想要做一個心愿墻，問我能不能行

  我心想，這太容易了，但為了多摸一天魚，我說還是有點(diǎn)挑戰(zhàn)的   結(jié)果下午，產(chǎn)品經(jīng)理和設(shè)計師就給我發(fā)來了設(shè)計參考

image.png   他們說，心愿墻的設(shè)計大致是這樣的，每個用戶的心愿都是一個氣泡，而客戶的品牌是”龍“，我們希望在前端頁面里用氣泡呈現(xiàn)一個龍形的設(shè)計，每個氣泡都會浮動，鼠標(biāo)移上去變大，點(diǎn)擊后展示心愿詳情。   當(dāng)時我的內(nèi)心是這樣的

  image.png  

我摸魚的一天要泡湯了嗎?

誰都不能阻止我摸魚

但首先要解決最核心的問題

龍從哪里來?

設(shè)計師說了，他可以給我一條由氣泡組成的龍的設(shè)計稿，我說那等你設(shè)計稿給我，我再研究把。結(jié)果他說，已經(jīng)有了，你就用這個吧

image.png

我的刀呢?

互動問題

請在評論區(qū)留下你遇到過的最奇葩的需求

拆解需求

遇到不靠譜的產(chǎn)品經(jīng)理和設(shè)計師，前端工程師真是慘。我們頂著最后交付成品的巨鍋，所有deadline感覺都只是用來壓榨前端工程師的。

我們只能靠自己，因為

誰都不能阻止我摸魚

• 需求1：有鼠標(biāo)交互效果(太簡單)
• 需求2：氣泡要浮動(css動畫，easy)
• 需求3：氣泡組成一條龍

此時我腦海里響起這首爛大街的歌

左邊跟我一起畫個龍，在你右邊畫一道彩虹~

誒，畫個龍

用什么畫，canvas

canvas能獲得指定區(qū)域的像素點(diǎn)陣

臥槽，有招兒了

代碼時間

先用圖片搜索找一張龍的剪影

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); 
   
  
  
  
} 
  
 
 
 

獲取并裁剪畫布的點(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

通過點(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

開心摸魚吧

本例里使用div繪制大量的dom，僅為闡述思路，沒考慮性能。利用一些js游戲引擎，比如pixi等，可以很方便的全部交由canvas去繪制并添加交互。

 原文鏈接：https://mp.weixin.qq.com/s/iE1vK6hA4IUYsNPpreTKew

本文標(biāo)題：產(chǎn)品經(jīng)理：你能不能用Div給我畫條龍？
URL鏈接：http://uogjgqi.cn/article/cccpgcj.html