作业是这样的，前天上午产品司理说想要做一个希望墙，问我能不能行

我心想，这太简略了，但为了多摸一天鱼，我说仍是有点应战的

效果下午，产品司理和规划师就给我宫崎骏发来了规划参看

产品司理：你能不能用div给我画条龙？

他们说，希望墙的规划大致是这样的，每个用户的希望都是一个气泡，而客户的品牌是狗狗币”龙“，咱们希望在前端approve页面里用气泡Canvas出现一个龙形的规划，每个气泡都会起浮，鼠标移上去变大，点击后展示希望概况。

当时我的心里是这样的

产品司理：你能不能用div给我画条龙？

我摸鱼的一天要失败了吗？

谁都不能阻挡我摸鱼

但宫颈癌前期症状首先要处理最中心的问题

龙从哪里来？

规划师说了，他可以给我一条由气泡组成的龙的规划稿，我说那等你规划稿给我，我再研讨把。效果他说，已经有了，你就用这个吧

产品司理：你能不能用div给我画条龙？

我的刀呢工商银行？源码年代

互动问题

请在议论区留下你遇到过的最奇葩的需求

拆解approve需求

遇到不靠谱的产品司理和规划师，前端工程师真是惨源码编辑器手机版下载。咱们顶着源码资本终apple究交给制品的巨锅，全部deadline感canvas翻译觉都只是用来压榨前端工程师的。

我canvas软件们只能靠自己，由于

谁都不能阻挡我摸Go鱼

  • 需龚俊求1：有鼠标交互canvas标签效果（太简略appointment）
  • 需求element是什么牌子2：气泡要起浮app设备下载（css动画，easy）
  • 需求3：气泡组成一条龙

此时我脑海里响起这首烂大街的歌

左边跟我一起画个龙，在你右边画一源码生意网站源码道彩虹~

诶，宫颈癌前期症状画个龙

用什么宫颈癌疫苗画，canvas

canvas能获得指狗狗币定区域的像素点阵

卧canvas标签槽，有招儿了

代码时eleme公积金ntary怎样读英语间

先用图片查找找一龚俊张龙的剪影龚俊

产品司理：你能不能用div给我画条龙？

产品司理：你能不能用div给我画条龙？

将图片制造到canvas中

var canvas = document.getEl龚俊ementById(apple"canvas");
vaelements翻译r ctx = canvas.getContext("2d");
var image = new Image();
image.src = "drago源码本钱n源码编辑器手机版下载.jpg";
image.onloadapple = function(){
canvas.width = image.width;
c狗狗币aapproachnvas.height =源码年代 ielements翻译magapplee.height;
ctx.element什么意思中文drawImage(image,0,0);
}

获取并裁剪画布的点阵信息

var imaapprovege源码生意网站源码Data = ctxelementui.getImagapproveeData宫颈癌疫苗(0,0,image.width,image.height).data;
ctx.fillStyle = "#ffffff";elementary是什么意思
ctx.filelementary是什么意思lRect(0,0,image.width,imcanvas登录age.height)canvas标签;
vCanvasarappear gap = 6;Element
for (var helement是什么牌子 = 0; h < image.heigcanvas交大ht; h+=gap) {
for源码年代(var w = 0; w < image.width; w+=gap){
var position = (image.width * hgoogle + w) * 4;
var r = i源码编辑器mageData[position], g = imageData[positelementuiion + 1], b = imageData[positigoog枸杞leon + 2];
if(r+g+canvas登录b==0){
ctx.fillStyle = "#000";
ctx.fillRect(w,h,4,4);
}
}
}

现在咱们获得了这样一条龙的点阵信息

产品司理：你能不能用div给我画条龙？

通过点阵信息生成气泡dom

var dragonContaine宫颈癌疫苗r公积金 =Canvas document.getElementById("contelementsainer");
var dragonScale = 2;
for (var h = 0; h &l龚俊t;APP image.height; h+=gap) {
for(var w = 0; w < image.w源码编辑器编程猫下载idtelementary是什么意思h; w+=gap){
var position = (imag源码e.wi源码年代dth * h +elementui w) * 4;
var r = imageData[poapp装置下载sition], g = imageData源码买卖网站源码[position + 1], b = imageData[posiAPPtion + 2];
ifapprove(r+g+b==0){
var bubblecanvas标签 = document.createElement("img");
bubble.狗狗币src = "bubble.png";
bubble.setAttrielement什么意思中文butelements翻译e("c狗龚俊狗币lass","bubble")Element;
var bubb宫颈癌前期症状leSize = Math.random()*10+20;
bubble.style.left = (w*dragonScale-bubbleSize/2) + "px";
bubblecanvas标签.style.top = (h*dragonScale-bubbleSize/2) + "px";
bubble.style.wielementsdappelementuistoretelementsh = bubble.sAPPtyle.height = bubbleSize+"approachpx";
bubble.style.anima源码tionDapp设备下载uration源码买卖网站源码 = Math.random()*6+4 + "s";
dragonContainer.appendChilcanvassingd(bubble);
}
}
}

产品司理：你能不能用div给我画条龙？

快乐摸鱼吧

本例里运用div制造许多的dom，仅为论述源码编辑器编程猫思路，没考虑功能。运用一些js游戏引擎，比方pixi等，可以很便利的全部交由canvas去制造并宫颈癌前期症状添加交互。源码编辑器

本故事纯属虚构，参看案例来自自己2011年末为客户开发的新龚俊年活动网站。

源码

微信查找并重视“大帅老猿”，回复泡泡龙获得源码