为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
Html/CSS CSS3

事情是这样的,前天上午产品经理说想要做一个心愿墙,问我能不能行

我心想,这太容易了,但为了多摸一天鱼,我说还是有点挑战

结果下午,产品经理和设计师就给我发来了设计参考

image.png

他们说,心愿墙的设计大致是这样的,每个用户的心愿都是一个气泡,而客户的品牌是”龙“,我们希望在前端页面里用气泡呈现一个龙形的设计,每个气泡都会浮动,鼠标移上去变大,点击后展示心愿详情。

当时我的内心是这样的

image.png

我摸鱼的一天要泡汤了吗?

谁都不能阻止我摸鱼

但首先要解决最核心的问题

龙从哪里来?

设计师说了,他可以给我一条由气泡组成的龙的设计稿,我说那等你设计稿给我,我再研究把。结果他说,已经有了,你就用这个吧

image.png

我的刀呢?

互动问题

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

拆解需求

遇到不靠谱的产品经理和设计师,前端工程师真是惨。我们顶着最后交付成品的巨锅,所有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去绘制并添加交互。

作者:大帅老猿
链接:https://juejin.cn/post/6963476650356916254
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

点击查看更多内容
4人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
数据库工程师
手记
粉丝
42
获赞与收藏
202

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消