lessfish - 博客园

css3实践之摩天轮式图片轮播+3D正方体+3D标签云（perspective、transform-style、perspective-origin）

摘要：本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性。 demo预览：前文回顾在前面的文章css3实践之图片轮播（Transform，Transition和Animation）中我们简单地了解了css3旗下的transform、transition以及animation。回顾一阅读全文

posted @ 2015-03-09 09:13 lessfish 阅读(3263) 评论(2) 推荐(5) 编辑

css3实践之图片轮播（Transform，Transition和Animation）

摘要：楼主喜欢追求视觉上的享受，虽常以牺牲性能无法兼容为代价却也乐此不疲。本文就通过一个个的demo演示来简单了解下css3下的Transform，Transition和Animation。本文需要实现效果：（请用chrome打开） Transform 根据我的理解，transform和width、he 阅读全文

posted @ 2015-03-06 10:22 lessfish 阅读(5050) 评论(7) 推荐(2) 编辑

Canvas之打字机游戏

摘要：最近针对粒子化作了一点点的探究，决定结合其做个小游戏，于是这个简单的打字游戏出世了。试玩地址：Typewriter game 仅在chrome下测试，请谨慎使用其他浏览器（特别是ff）；加载速度有点慢，请耐心等待5~10秒。因为需要加载的粒子太多了... 游戏概况游戏逻辑和代码其实是很简单的，都阅读全文

posted @ 2015-03-02 08:47 lessfish 阅读(1637) 评论(0) 推荐(5) 编辑

谈谈文字图片粒子化

摘要：之前写了谈谈文字图片像素化，主要是为了将文字和图片像素化后的坐标提取出来，而本篇所讲即为像素化后的粒子化过程。先上一个简单的demo -> 粒子化demo，本篇的目的就是为了讲解怎样做这样的简单demo（大牛请无视）；同时会介绍一些优秀的demo供大家参考。主要思路首先我们谈谈粒子化的主要思路阅读全文

posted @ 2015-02-27 13:29 lessfish 阅读(2193) 评论(4) 推荐(4) 编辑

rotate 3d基础

摘要：基础看了岑安大大的教程学习了3d基础，之前写了篇总结，觉得写的太散废话太多，重写一篇。本文需要实现的效果如下：3d球岑安的两篇教程写的很棒，但我感觉改变下顺序或许会更好理解。我们把画布（此文所讲所见所得均基于canvas）的中心当做是一个空间三维系的中心，画布的x和y轴正方向分别当做... 阅读全文

posted @ 2015-02-12 12:26 lessfish 阅读(1836) 评论(4) 推荐(1) 编辑

两个Canvas小游戏

摘要：或许连小游戏都算不上，可以叫做mini游戏。没有任何框架或者稍微有点深度的东西，所以有js基础的或者要追求炫酷效果的可以直接ctrl+w了。先贴出两个游戏的试玩地址：是男人就走30步是男人就忍30秒基础基础接下来简单说说怎样开发这样的基础游戏。首先你要懂得canvas上的基本api，阅读全文

posted @ 2015-02-08 20:07 lessfish 阅读(1689) 评论(0) 推荐(5) 编辑

【自己给自己题目做】：如何用裸的 Canvas 实现魔方效果

摘要：最终demo -> 3d魔方体验方法：浮动鼠标找到合适的位置，按空格键暂停选择要翻转的3*3模块，找到相邻两个正方体，鼠标点击第一个正方体，并且一直保持鼠标按下的状态直到移到第二个正方体后放开，比如下图：（鼠标点击1处，然后一直移动到2处松开，中间一行的3*3模块绕图示方向发生转动）按空格阅读全文

posted @ 2015-02-02 10:52 lessfish 阅读(2054) 评论(5) 推荐(4) 编辑

Canvas之蛋疼的正方体绘制体验

摘要：事情的起因之前写了篇谈谈文字图片粒子化 I，并且写了个简单的demo -> 粒子化。正当我在为写谈谈文字图片粒子化II 准备demo时，突然想到能不能用正方体代替demo中的球体粒子。我不禁被自己的想法吓了一跳，球体的实现仅仅是简单的画圆，因为球体在任意角度任意距离的视图都是圆（如果有视图的话）阅读全文

posted @ 2015-01-29 10:16 lessfish 阅读(3441) 评论(1) 推荐(4) 编辑

谈谈文字图片像素化

摘要：先来看个简单的demo-> 像素粒子化 demo是基于3d旋转算法+像素粒子化实现的，尚有一些bug和性能问题，我们不做深究。本篇主要谈谈如何将文字和图片的像素粒子化。针对这个demo，也就是如何实现如下两个图片的转换。无论文字还是图片，本篇所讲都是针对画布，这点要清楚。如果是文字，用fillTe 阅读全文

posted @ 2015-01-26 19:48 lessfish 阅读(3719) 评论(2) 推荐(6) 编辑

simplify the life