三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之

  纯css打造投影效果——CSS3属性transform的应用 作者:Neoxone    发表时间: 2010年11月3号,星期三     阅读:9,479 次  

刚在twitter上看见这个效果。
Getting Clever with CSS3 Shadows
插播广告——“拥有css3,拥有无限可能。”

这个效果里,除了应用阴影属性box-shadow之外,还需要一个重要属性的支持——transform
其实transform算是一个混合属性,它同canvas和svg的transform一样,带有几个独立的方法:平移(translate),缩放(Scaling),旋转(Rotating),另外,还有一个斜切(Skewing)。其实,斜切和旋转是有关系的:当skewX=-skewY时,它就是一个纯粹的Rotate。

下面就是效果演示。略有改动,原demo没有考虑opera,在此补上。
所以,应该除了ie9以下的浏览器,其他所以用户都能看见效果。

————几分钟之后——————
我们发现safari竟然不支持。
但千万不要怀疑safari的transform能力。——它可是支持3D变换的。
Visual Effects Transform Functions
从中可以看出,safari的transform完全应该可以达到效果的。
(另外,safari的Transition和Animation这两个CSS属性/方法也是异常的强大)

现在把目光转向box-shadow属性。
前面我们的写法是:box-shadow: 100px 0 10px 20px rgba(0,0,0,.2);
这里有5个属性,分别表示 X偏移offset-x,Y偏移offset-y, 模糊半径blur-radius ,延伸半径spread-radius,和 color
这是据MDC的说法,-moz-box-shadow
除了这5个属性值之外,还有一个属性值inset——表示内阴影。另外,这个属性值组还可以设置多组,中间用逗号隔开。
inset值在safari下不支持,这点我们之前就有所了解。除此之外,还有没有其他差异呢?
请看:-webkit-box-shadow
原来safari下还不支持“延伸半径”值。

那么为了兼容safari,我们可以修改一下:

   

  Transform变形方法的可视化演示 作者:Neoxone    发表时间: 2010年10月22号,星期五     阅读:11,158 次  

canvas 的变形方法transform是三个基本变形方法的结合,他们是
translate——移动;rotate ——旋转,在transform中分解为x,y两个方向的斜切;和scale——缩放。
他的参数是变形矩阵的六个数值:m11, m12, m21, m22, dx, dy
变形矩阵:

m11 m21 dx
m12 m22 dy
0 0 1

对于transform方法的使用,其实很难把握,所以写了下面这个演示

类似文章:bezierCurveTo方法的可视化操作:贝塞尔曲线的可视化操作实现——Photoshop钢笔工具的初级模拟
关于canvas的其他方法,可以参考这篇文章:MDC的canvas经典教程辑和个人学习笔记

   

  笛卡尔情书的秘密——心形函数的绘制 作者:Neoxone    发表时间: 2010年10月18号,星期一     阅读:49,515 次  

r=a(1-sinθ)

据说这是笛卡尔死前寄出的最后一封情书的内容, 而这里面隐藏着一个刻骨铭心的秘密。。。

当时法国正流行黑死病,迪卡尔不得不逃离法国, 流浪到瑞典。 
某天,他在市场乞讨,有一群少女经过, 其中一名少女发现他的口音不像是瑞典人,非常好奇,于是上前问他, 
你从哪来的啊? 法国。 
你是做什么的啊? 我是数学家。 

这名少女叫克丽丝汀,18岁,是一个公主, 
她和其它女孩子不一样,并不喜欢文学,而是热衷于数学。 
当她听到迪卡尔说明身份之后,感到相当大的兴趣,于是把迪卡尔邀请回宫。 迪卡尔就成了她的数学老师,将一生的研究倾囊相授给克丽丝汀。 
而克丽丝汀的数学也日益进步,直角坐标当时也只有迪卡尔这对师生才懂。 后来,他们之间有了不一样的情愫,发生了喧腾一时的师生恋。
这件事传到国王耳中,让国王相当愤怒,下令将迪卡尔处死!克丽丝汀以自缢相逼, 国王害怕宝贝女儿真的会想不开, 于是将迪卡尔放逐回法国,并将克丽丝汀软禁。 
迪卡尔一回到法国后,没多久就染上了黑死病,躺在床上奄奄一息。 迪卡尔不断地写信到瑞典给克丽丝汀,但却被国王给拦截没收, 所以克丽丝汀一直没收到迪卡尔的信。。。 

在笛卡尔快要死去的时候,他寄出了第13封信,  这封信的内容只有短短的一行:
r=a(1-sinθ) 
国王拦截到这封信之后,拆开看发现并不是一如往常的情话。 国王当然看不懂这项数学式,于是找来城里所有科学家来研究, 但都没有人能够解开到底是什么意思。 
国王心想反正迪卡尔就快要快死了, 
而且公主被软禁时都闷闷不乐的,所以,就把信交给克丽丝汀。 
当克丽丝汀收到这封信时,雀跃无比,她很高兴她的爱人还是在想念她的。
她立刻动手研究这行字的秘密。。。很快就解开了这个属于他们两个人之间秘密。

而我们将借助canvas的arc方法,为你揭开这行字的秘密:

不久之后那位国王死了,克丽丝汀继承王位, 登基之后她马上派人在欧洲四处寻找迪卡尔的踪迹,可惜人已故。。。

除了使用arc方法,bezierCurveTo方法来绘制各种曲线图形也不在话下,但那并不是通过心形函数本身绘制的。

好吧其实r=a(1-sinθ)是极坐标系方程,而不是笛卡尔坐标系(直角坐标系)方程式。
关于心形函数的一些资料

话说,极坐标公式是非常利于绘制图形的。
比如玫瑰线公式:r(θ) = a sin kθ
阿基米德螺线公式:r(θ) = a+bθ

另外,出于审美需求,我们的心型图形往往是这样的:
17(x^2+y^2)-16*abs(x)*y=225
但是这里所用到的坐标系是直角坐标系,我们可以先转换成极坐标方程,如下:
r=sqrt(225/(17-16sinθ*sqrt((cosθ)^2)))
绘制如下:

   

  推荐电影《The Wilderness Downtown》 作者:Neoxone    发表时间: 2010年09月27号,星期一     阅读:2,708 次  

The Wilderness Downtown

导演:Chris Milk

主演:Anybody

出品公司/团体:Google / Arcade Fire

语言:英语

音乐:We Used to Wait

官方网站:http://www.chromeexperiments.com/arcadefire/

电影截图:

电影片段

电影介绍:
这不是一部iMax 3D电影,但交互自定的场景设置,交叉多变的窗口展示,足可让你有一次前所未有的体验。这是一部号称Interactive film 的电影——如果你愿意称它为电影的话。
它的播放,借助于你的浏览器(插播广告:请使用google生产的chrome浏览器,非凡体验,尽在chrome。),这部电影本身其实就是一个Chrome Experiments。
介绍一下所采用的技术:
html5的canvas,video,audio是不可缺少的,然后结合了Google Map和Google Street View,还有其他一些扩展的web技术和传统的电影技术了。

   

  贝塞尔曲线的可视化操作实现——Photoshop钢笔工具的初级模拟 作者:Neoxone    发表时间: 2010年09月16号,星期四     阅读:8,573 次  

贝塞尔曲线在数字绘图中有着非常重要的地位,你可能使用过photoshop的钢笔工具,那就是贝塞尔曲线的应用。
在html5的canvas中也得到了实现,即bezierCurveTo函数。
虽然功能不错,但是凭空使用 bezierCurveTo来绘图可不是件方便的事。
他的6个参数:(控制点1的坐标X,控制点1的坐标y,控制点2的坐标x,控制点2的坐标y,终点坐标x,终点坐标y)并不是你一见就能知道最终效果的。
黑客帝国中的那种通过没有数字视频解码器的显示设备,纯粹看代码来监视母体世界的能力,不是一时半会能够修炼的出来的。

下面的demo就提供了这种类似数字解码功能,使得你可以可视化操作曲线。
然后,这还只是个很初级的东西,希望大家支持,我会慢慢完善的。
此demo仅提供了单条贝塞尔曲线的操作,可控的点有四个,暂没有拖动线条的功能。
和那种用HTML5实现整个photoshop功能的项目比起来。这只能算是小小的练习,希望这个练习在不久的未来能够用上。