产品经理:你能不能用div给我画条龙?

简介: 事情是这样的,前天上午产品经理说想要做一个心愿墙,问我能不能行我心想,这太容易了,但为了多摸一天鱼,我说还是有点挑战的结果下午,产品经理和设计师就给我发来了设计参考

拆解需求


遇到不靠谱的产品经理和设计师,前端工程师真是惨。我们顶着最后交付成品的巨锅,所有deadline感觉都只是用来压榨前端工程师的。


我们只能靠自己,因为


谁都不能阻止我摸鱼


  • 需求1:有鼠标交互效果(太简单)


  • 需求2:气泡要浮动(css动画,easy)


  • 需求3:气泡组成一条龙


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


左边跟我一起画个龙,在你右边画一道彩虹~


诶,画个龙

用什么画,canvas

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


卧槽,有招儿了


代码时间


先用图片搜索找一张龙的剪影


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


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


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


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


image.png


通过点阵信息生成气泡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去绘制并添加交互。



相关文章
|
5月前
|
移动开发 前端开发 HTML5
技术经验解读:关于前端的margin
技术经验解读:关于前端的margin
45 0
|
5月前
|
XML JavaScript 前端开发
技术经验分享:fadeIn()与fadeOut()方法
技术经验分享:fadeIn()与fadeOut()方法
43 0
|
6月前
|
前端开发
小兔鲜儿【网页布局实战 下】
小兔鲜儿【网页布局实战 下】
82 0
|
6月前
|
前端开发 SEO
小兔鲜儿【网页布局实战 上】
小兔鲜儿【网页布局实战 上】
128 0
|
6月前
|
JavaScript 前端开发
layui使用实践总结
layui使用实践总结
112 0
|
SQL 前端开发 Java
LayUI--会议发布功能
LayUI--会议发布功能
60 0
高情商HR教你面试高招(上)
高情商HR教你面试高招(上)
116 0
|
移动开发 前端开发 HTML5
Html中div学习使用过程中踩过的坑
&lt;div&gt;&lt;/div&gt;标签是Html5中运用到的最重要的一个标签之一,本文是我对在div学习使用过程中踩过的坑进行的一个小总结系列
122 3
Html中div学习使用过程中踩过的坑
|
前端开发
前端工作总结167-对element-form的理解
前端工作总结167-对element-form的理解
85 0
前端工作总结167-对element-form的理解
|
前端开发
前端工作小结31-swiper使用
前端工作小结31-swiper使用
97 0