仅显示以下 4 篇带「图片」关键字的文章。 返回词云 或 查看全部文章
2016-05-24 by Dron
前端同学在切页面时，很多简单效果可以直接 CSS3 实现掉，这样就不必使用图片了，大大减少图片处理的时间。
市面上的拾色器，包括 PhotoShop 中的吸管，都没有提供图片像素中 Alpha 通道的值，遂用 <canvas> 的 getImageData 方法简单实现了个在线版，有需要的同学请自行收藏。
getImageData 方法返回画布上指定矩形区域的 ImageData，包括该区域中所有像素点的 R、G、B、A 四个通道的颜色信息。上一篇文章 也提到它。
2012-04-26 by Dron
最近被炒得比较火的「绿色承诺，拯救地球」活动中，有一个 Flash 版的 3D 地球，我一看来了兴趣，一直想用纯 JavaScript 也实现一版，直到昨晚才腾出点时间，开始折腾这事。
这里是 Demo。
实现原理也简单，直接把 .mask 的 <div> 设置为 display:none 就能看明白：上下两个层重叠，上层放一个 png 背景图，该 png 图片中间有个篓空的圆形，目的是透过该圆形看到后一层的图片，这样，基本的球状就完成了；下层放的是一张滚动的地图，该地图被拆碎分放到 99 个 div 容器中，这些容器大小不一，成条状横向并排，使之拼合起一张完整的地图，这些 div 的宽度是根据正弦曲线计算得出，越靠中间的 div 越宽，使地图能呈现出曲面效果，滚动地图的实现是通过对这些 div 改变背景图片的位置来完成，此外，我对这些 div 做了不同程度的纵向拉伸，边缘低，中间高，也是根据的正弦曲线算法，使地图滚动时点的物理走向更能加接近球面的特点，当然，这是错觉艺术，更像是卷纸，不是真正意义上的球面。
由于中间的容器排列方法为横向，并且拉伸了高度，这样做，决定了地球只能做正东或正西方向的滚动，其它方向的滚动需要改变容器的排列和拉伸方法，小有复杂，我做了一些实验，效果不是很理想。
2011-12-08 by Dron
最近在折腾一个相册，先附上一个小样：
测试图片是我从本地临时文件夹里随便拷贝的一部分图片，不解释，给点建议呗。
PS: 看来分两篇博客发不科学啊，求源码的同学移步这里
2011-07-12 by Dron
本文将分享如何用 JS 写出一个 3D 赛车，我之前曾在技术交流会上也讲过一次（这里是当时用的 PPT），后来有同学反馈说讲得太深奥没听懂。其实 PPT 里说的更多的是三维图形的基础知识，实现原理体现的稍微少一些，那么本文将着重从实现原理这块做一些补充。
先看赛车的示例：http://ucren.com/racing/，还是半成品状态，很多功能没有实现，不过目前也没有后续的开发计划。