网页
资讯
视频
图片
知道
文库
贴吧
地图
采购
进入贴吧
全吧搜索
吧内搜索
搜贴
搜人
进吧
搜标签
日
一
二
三
四
五
六
签到排名:今日本吧第
个签到,
本吧因你更精彩,明天继续来努力!
本吧签到人数:0
一键签到
成为超级会员,使用一键签到
一键签到
本月漏签
0
次!
0
成为超级会员,赠送8张补签卡
如何使用?
点击日历上漏签日期,即可进行
补签
。
连续签到:
天 累计签到:
天
0
超级会员单次开通12个月以上,赠送连续签到卡3张
使用连续签到卡
10月23日
漏签
0
天
二次元的程序员吧
关注:
1,224
贴子:
6,321
看贴
图片
吧主推荐
游戏
3
回复贴,共
1
页
<<返回二次元的程...吧
>0< 加载中...
前端:会玩的console!
取消只看楼主
收藏
回复
小久远控
神代芙拉
12
该楼层疑似违规已被系统折叠
隐藏此楼
查看此楼
console.log("Hello word");
console可以输出变量值是否取到,方法是否执行,
这是前端测试最常用的方法之一,另外还有一些有趣的玩法。
百度:
掘金:
B站
小久远控
神代芙拉
12
该楼层疑似违规已被系统折叠
隐藏此楼
查看此楼
小久远控
神代芙拉
12
该楼层疑似违规已被系统折叠
隐藏此楼
查看此楼
我们知道,二维图像微观上是由一个个精巧排布的不同颜色的像素点组成,而动画则是这些像素点不断按规律地变换样式颜色,加上人眼的视觉暂留现象,从而形成看上去连贯的动画。
console.log 很显然能满足拼凑出图像所需要的条件:
一个字符的打印位置便可以对应一个像素点的排列位置
一个字符的css样式可以对应一个像素点的颜色样式
而让这图像里的内容动起来,可以像canvas那样启用“渲染”,每次“渲染”时先使用console.clear()清除掉上一次打印出的字符,然后计算场景中需移动的字符本次所在的位置,打印出字符到该位置,一定时间间隔后进行下一次“渲染”操作。
为了实现上述效果,需要构建出console眼中的二维世界观。
一个完整的二维图像,可以由若干个子图像组成,即元素(element),
例如这个糊一脸井号的心💗:
## ##
#### ####
#######
#####
#
将它放入图像场景中(scene)中,它便拥有在该场景中的位置属性。
小久远控
神代芙拉
12
该楼层疑似违规已被系统折叠
隐藏此楼
查看此楼
实现代码及动画实例代码的地址见下:
https://github.com/youngdro/ConsoleCanvas
登录百度账号
扫二维码下载贴吧客户端
下载贴吧APP
看高清直播、视频!
贴吧页面意见反馈
违规贴吧举报反馈通道
贴吧违规信息处理公示