本文转载自微信公众号“大帅老园”，作者大帅从事全栈。转载本文请联系大帅老园公众号。事情是这样的，前天早上产品经理说要建许愿墙，问我能不能做。我心想，这也太容易了吧，不过为了再钓一天，我说还是有点挑战的。下午，产品经理和设计师给我发了一张设计参考图片.png。他们说许愿墙的设计大致是这样的。每个用户的愿望都是一个泡泡，客户的品牌就是“龙”。我们希望前端页面用泡泡来呈现一个龙形的设计，每个泡泡都会漂浮起来，当鼠标向上移动时，它会变大，点击后会显示愿望的详情。当时心里是这样的image.png我钓鱼的日子要白费了吗？没有人能阻止我钓鱼，但首先我要解决核心问题。龙从何而来？设计师说可以给我一个泡泡组成的龙的设计稿，我说你给我设计稿我研究一下。结果他说，我已经有了，你可以用这个image.png我的刀呢？互动问题，请在评论区留下你遇到过的最奇葩的需求。不靠谱的产品经理和不靠谱的产品经理和拆解需求设计师，前端工程师真的很惨。我们背着交付成品的大锅，所有的deadline感觉都是用来压榨前端工程师的。只能靠自己了，因为没有人能阻止我钓鱼需求1：有鼠标交互效果（太简单了）需求2：泡泡要漂浮（css动画，easy）需求3：泡泡成龙这时候，脑子里传来一个声音，在这烂街歌的左边跟我画一条龙，在你的右边画一条彩虹~咦，你用什么画龙？Canvascanvas可以得到指定区域的像素矩阵。卧槽，有窍门。使用代码时先进行图片搜索，找到龙的剪影image.pngimage.png将图片绘制到画布上varcanvas=document.getElementById("canvas");varctx=canvas.getContext("2d");varimage=newImage();image.src="dragon.jpg";image.onload=function(){canvas.width=image.width;canvas.height=image.height;ctx.drawImage(image,0,0);}获取并裁剪画布信息的点阵varimageData=ctx.getImageData(0,0,image.width,image.height).data;ctx.fillStyle="#ffffff";ctx.fillRect(0,0,image.width,image.height);vargap=6;for(varh=0;h
