Dron 博客

一组你值得拥有的 Markdown 中混用 HTML 案例

2019-08-23 by Dron

Markdown 基础语法（见附录）已经无法满足日益丰富的信息内容，好在 Markdown 支持直接写 HTML，让扩展成为可能。

本文罗列一些常见的、实用的扩展案例，尝试设定规约，通过用少量的 HTML 代码作为 Markdown 的补充来辅助排版，并且保持简明直观的语义。

如果你是一个完美 Markdown 控，对于混用 HTML 的情况实在无法接受的话，可以不用往后阅读了。

Map 的两个小扩展

2018-09-03 by Dron

在以前，实现数据映射，我们利用给对象属性赋值，就像这样：

var mapping = Object.create( null );
mapping[ key ] = value;

ES6 的 Map/WeakMap 提供了更为便利及语义化的用法，功能更加强大，key 支持所有数据类型：

const mapping = new Map;
mapping.set( key, value );

通过继承 Map/WeakMap，很容易扩展功能，以 Map 为例，本文讲述一个带 过期控制 和 持久化 能力的 Map 扩展。

图片 RGBA 拾色器

2016-05-24 by Dron

前端同学在切页面时，很多简单效果可以直接 CSS3 实现掉，这样就不必使用图片了，大大减少图片处理的时间。

市面上的拾色器，包括 PhotoShop 中的吸管，都没有提供图片像素中 Alpha 通道的值，遂用 <canvas> 的 getImageData 方法简单实现了个在线版，有需要的同学请自行收藏。

getImageData 方法返回画布上指定矩形区域的 ImageData，包括该区域中所有像素点的 R、G、B、A 四个通道的颜色信息。上一篇文章 也提到它。

千行代码实现 IE8 兼容的仿 angular 指令式模板控制器

2015-05-19 by Dron

Angular 出来的时候火了一阵，现在受到 React 的冲击显得有些冷却，之前我只是听说，也听过 @隐若 老师的一些分享，但一直没有机会用上或深入了解他的特性。

直到上个月初，内部要做个 xx 平台，平台上的表单功能有些繁琐，所有表单域都是根据配置项动态渲染出来的，验证、联动什么的也都是配置。初步判断用 Angular 的指令和双向数据绑定可以很好满足，不过后来并没有直接用上 Angular，具体原因就不在这儿展开了。

错觉艺术(2)：将普通照片立体化

2012-05-09 by Dron

花了几个小时，终于把我儿子的照片 P 完了，兴奋之余，决定还是把博客文章也一起写完。

直接看 Demo，后面的内容就当是废话吧。

实现原理简单得不得了，大多数人一眼就看明白：把照片按照景物的距离 P 成多层，每个层按距离的大概比例做位移，离镜头越远的景物，移动的速度越快，反之则相反。镜头焦点处的层不动，焦点之前的景物和焦点之后的景物移动方向保持相反。

个人感觉，本例的难点不在于 JS 实现，JS 大概也就几十行就搞定了，主要工作量在于 P 图上，把一张图分层，每个图层还要分别做镂空填补（可通过印章），图层僵硬的边缘要柔化（可用橡皮），当然，分得图层越多，立体效果越好。

错觉艺术(1)：JavaScript 版的 3D 地球

2012-04-26 by Dron

最近被炒得比较火的「绿色承诺，拯救地球」活动中，有一个 Flash 版的 3D 地球，我一看来了兴趣，一直想用纯 JavaScript 也实现一版，直到昨晚才腾出点时间，开始折腾这事。

这里是 Demo。

实现原理也简单，直接把 .mask 的 <div> 设置为 display:none 就能看明白：上下两个层重叠，上层放一个 png 背景图，该 png 图片中间有个篓空的圆形，目的是透过该圆形看到后一层的图片，这样，基本的球状就完成了；下层放的是一张滚动的地图，该地图被拆碎分放到 99 个 div 容器中，这些容器大小不一，成条状横向并排，使之拼合起一张完整的地图，这些 div 的宽度是根据正弦曲线计算得出，越靠中间的 div 越宽，使地图能呈现出曲面效果，滚动地图的实现是通过对这些 div 改变背景图片的位置来完成，此外，我对这些 div 做了不同程度的纵向拉伸，边缘低，中间高，也是根据的正弦曲线算法，使地图滚动时点的物理走向更能加接近球面的特点，当然，这是错觉艺术，更像是卷纸，不是真正意义上的球面。

由于中间的容器排列方法为横向，并且拉伸了高度，这样做，决定了地球只能做正东或正西方向的滚动，其它方向的滚动需要改变容器的排列和拉伸方法，小有复杂，我做了一些实验，效果不是很理想。

JS 3D 模型

2011-07-16 by Dron

最近断断续续地写出了这么个东西：http://ucren.com/demos/d3d/index.html。

这是一个简单的 JS 3D 模型，能跑在包括 IE6 的所有浏览器上，结合一下 tween 缓动算法，理论上已经可以完美模拟像 http://www.cu3ox.com/ 这个网站上方 banner 的各种变换效果了。

介绍一下实现细节，矢量绘图仍然用的是 Raphael 库，Raphael 我在《如何用 JS 实现 3D 赛车效果》这篇文章里有过介绍。此外，我参考了大量关于三维透视的文章，在下面的一些实现上用到了很多相关知识。

我们通常用一根带原点和正方向箭头的直线来表示数轴，数轴就是一个一维坐标系，两条在原点处相交并互相垂直的数轴就形成了二维坐标系，也叫平面直角坐标系，它用两个参数 x,y 来表示平面上一个点的位置，在平面直角坐标系上，加入一条经过原点且垂直于该平面的数轴就形成了三维坐标系，它用三个参数 x,y,z 来表示空间中一个点的位置。三维坐标系分为 左手坐标系 和 [右手坐标系] (http://baike.baidu.com/view/2939423.htm)两种，为了实现的方便，本例采用左手坐标系做为场景。

如何用 JS 实现 3D 赛车效果

2011-07-12 by Dron

本文将分享如何用 JS 写出一个 3D 赛车，我之前曾在技术交流会上也讲过一次（这里是当时用的 PPT），后来有同学反馈说讲得太深奥没听懂。其实 PPT 里说的更多的是三维图形的基础知识，实现原理体现的稍微少一些，那么本文将着重从实现原理这块做一些补充。

先看赛车的示例：http://ucren.com/racing/，还是半成品状态，很多功能没有实现，不过目前也没有后续的开发计划。