本文首发于我的个人博客：http://cherryblog.site/github 项目地址：https://github.com/sunshine940326/canvas-nest 首先上效果图：最终效果图 因为使用 gif 图片的原因，线条不是很清晰，大家可以到我的博客观看效果…

为了保证的可读性，本文采用意译而非直译。 超过46K的星星，这个流行的库提供了非常多的3D显示功能，以一种直观的方式使用 WebGL。这个库提供了<canvas>、 <svg>、CSS3D 和 WebGL渲染器，让咱们在设备和浏览器之间创建丰富的交互体验。该…

图表库千万个今天 HelloGitHub 给大家推荐个很有“特色”的图表库：一个手绘风格的 JS 图表库 —— Chart.xkcd，快收起你紧绷、严肃的面容让我们一起看看用手绘风格展示数据的效果。 Chart.xkcd 是一个图表库，可绘制“非精细”、“卡通”或“手绘”样式的…

与手机导航不同，高德地图的车机版（AMAP AUTO）直接面对各大车厂和众多设备商。这些B端用户采用的硬件参数参差不齐，提出的业务需求涉及到渲染中诸多复杂技术的应用，这对渲染性能提出了极高的要求。 最初车机版沿用手机版的当前屏渲染模式，每一帧都需要实时的将地图元素渲染出来。但在…

我是一名来自蚂蚁金服-保险事业群的前端工程师，在一线大厂的业务部门写代码，非常辛苦但也非常充实。业务代码不同于框架代码、个人项目或者开源项目，它的特点在于逻辑复杂、前后依赖多、可复用性差、迭代周期短，今天辛辛苦苦写的代码，上线运行一周可能就下线了。能熟练书写框架代码、构建底层基…

第一次尝试选择了我比较熟悉的 PixiJS，关于我如何用 PixiJS 中的 Sprite3d 做了一个失败的 3D 卡片，可以 戳这里查看。 有了第一次失败的经历，果断老实选择使用 three.js 来实现 3d 效果。 但为什么选择使用 CSS3DRenderer 实现，可…

本文使用geojson数据，通过缩放和平移把地图的地理坐标系转换canvas的屏幕坐标系，然后将转换后的数据绘制到canvas上。 首先要计算数据的最大最小值，遍历所有坐标点的最大最小经纬度。在这个步骤要注意坐标点是否都遍历到，因为数据中可能会有多面和洞的存在。 第二步就是转换…

前几天有很多人问到了如何绘制高德地图那样的导航箭头线效果，当时想了想并不难就先用canvas 做了，然后集成到mapbox 上，迁移到其他map lib 也只需要应用相应的地理转屏幕坐标函数。 在canvas 的应用中我们经常会遇到各种线样式的绘制，比如虚线，渐变线，带patt…

上次发完 不可思议的纯 CSS 导航栏下划线跟随效果 这篇文章之后，很多朋友找我讨论，感叹 CSS 的奇妙。 将下面这个动画的下划线效果，从左进入，右边离开修改为从上方进入，下方离开。 第一眼看到这个效果，我的内心毫无波澜。以为只是简单的一个下划线 hover 效果，经过友人提…