作业是这样的,前天上午产品司理说想要做一个希望墙,问我能不能行
我心想,这太简略了,但为了多摸一天鱼,我说仍是有点应战的
效果下午,产品司理和规划师就给我宫崎骏发来了规划参看
他们说,希望墙的规划大致是这样的,每个用户的希望都是一个气泡,而客户的品牌是狗狗币”龙“,咱们希望在前端approve页面里用气泡Canvas出现一个龙形的规划,每个气泡都会起浮,鼠标移上去变大,点击后展示希望概况。
当时我的心里是这样的
我摸鱼的一天要失败了吗?
谁都不能阻挡我摸鱼
但宫颈癌前期症状首先要处理最中心的问题
龙从哪里来?
规划师说了,他可以给我一条由气泡组成的龙的规划稿,我说那等你规划稿给我,我再研讨把。效果他说,已经有了,你就用这个吧
我的刀呢工商银行?源码年代
互动问题
请在议论区留下你遇到过的最奇葩的需求
拆解approve需求
遇到不靠谱的产品司理和规划师,前端工程师真是惨源码编辑器手机版下载。咱们顶着源码资本终apple究交给制品的巨锅
,全部deadline
感canvas翻译觉都只是用来压榨前端工程师的。
我canvas软件们只能靠自己,由于
谁都不能阻挡我摸Go鱼
- 需龚俊求1:有鼠标交互canvas标签效果(太简略appointment)
- 需求element是什么牌子2:气泡要起浮app设备下载(css动画,easy)
- 需求3:气泡组成一条龙
此时我脑海里响起这首烂大街的歌
左边跟我一起画个龙,在你右边画一源码生意网站源码道彩虹~
诶,宫颈癌前期症状画个龙
用什么宫颈癌疫苗画,canvas
canvas能获得指狗狗币定区域的像素点阵
卧canvas标签槽,有招儿了
代码时eleme公积金ntary怎样读英语间
先用图片查找找一龚俊张龙的剪影龚俊
将图片制造到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);
}
}
}
现在咱们获得了这样一条龙的点阵信息
通过点阵信息生成气泡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制造许多的dom,仅为论述源码编辑器编程猫思路,没考虑功能。运用一些js游戏引擎,比方pixi等,可以很便利的全部交由canvas去制造并宫颈癌前期症状添加交互。源码编辑器
本故事纯属虚构,参看案例来自自己2011年末为客户开发的新龚俊年活动网站。
源码
微信查找并重视“大帅老猿
”,回复泡泡龙
获得源码