Canvas 绘制雪碧图导出
在开发中,我们经常会用到雪碧图,有时候 UI 可能给了很多小图,没有给到雪碧图,为了减少请求,我们会选择自己去在线生成或 ps,但是这样太繁琐了,能不能我们用一个函数实现呢?网上很多方案是借助 webpack 实现这个功能的,但是我想能不能简单点,于是就有了这个 demo,目前该 demo 可以合成雪碧图导出,但是没有导出对应的坐标 json 文件,后期再完善,先这样。
在开发中,我们经常会用到雪碧图,有时候 UI 可能给了很多小图,没有给到雪碧图,为了减少请求,我们会选择自己去在线生成或 ps,但是这样太繁琐了,能不能我们用一个函数实现呢?网上很多方案是借助 webpack 实现这个功能的,但是我想能不能简单点,于是就有了这个 demo,目前该 demo 可以合成雪碧图导出,但是没有导出对应的坐标 json 文件,后期再完善,先这样。
摘要:
最近做网页优化,发现页面会有一段白屏时间,给人的体验就是网页会有一闪而出的感觉,也就是我们常说的闪屏,查了一些资料,发现实现思路都是异曲同工的,就是在页面节点还没加载之前,先插一段静态网页,节点加载了再去掉这段静态代码,显示数据渲染出来界面。一般需要加骨架屏的界面,是一些动态加载数据的界面,因为数据没出来,会有一段比较长的白屏时间会给用户网加载慢的感觉。加了骨架屏,用会觉得网页加载比较快,属于一种视觉欺骗的手段吧。
# Merge two sorted linked lists and return it as a new list. The new list should be made by splicing together the nodes of the first two lists. |
# 给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效。 |
用别人的组件总有各种不可控的问题,而且不好维护,还是造轮子比较舒畅。
下拉列表是工作中经常用到的一个功能,点击按钮,显示下拉列表,点击列表中的项目显示对应的值到按钮中,这是下拉列表的常用交互。这里的一个比较有意思的点就是如何在点击别的地方时关闭列表。我采用的方法是监听组件最外层的 blur 事件,当该组件失去焦点时,关闭列表。由于按钮用的是 div 实现,默认 div 是没有 blur 事件的,这里添加一个 tabindex 属性, blur 就有效了。
这个函数是一个用于画 canvas 路径的,也就是把 canvas 画线的过程演示出来的一个东东。采用的是纯 js 和 canvas 描绘方法。当然前提是得有路径的点集,不然画不了。