如何用Div畫條龍

本篇文章為大家展示了如何用Div畫條龍，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

 拆解需求

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

誒，畫個龍

用什么畫，canvas

canvas能獲得指定區域的像素點陣

臥槽，有招兒了

代碼時間

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

將圖片繪制到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); }

獲取并裁剪畫布的點陣信息

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

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畫條龍，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。