iT邦幫忙

0

js有辦法作到透視嗎?

http://demos.dojotoolkit.org/demos/skew/
各位覺得這個ui那個圖片有透視的效果是因為兩張不同的圖片還是用程式控制的?
最近常看到canvas的應用,可是找不到解說的資料,不知道是否有關?

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

8
fillano
iT邦超人 1 級 ‧ 2009-11-02 15:31:49
最佳解答

http://demos.dojotoolkit.org/demos/skew/demo.css

找一下opacity,這跟canvas沒關係。想看什麼是canvas的話,mozilla網站上有很多參考資料,canvas比靜態特效強悍多了,拿來做alpha channel多可惜阿...下面是mozilla網站上的一些資料:
https://developer.mozilla.org/en/Canvas_tutorial
html5標準中的canvas規格:
http://dev.w3.org/html5/spec/Overview.html#the-canvas-element

看更多先前的回應...收起先前的回應...
fillano iT邦超人 1 級 ‧ 2009-11-02 15:33:58 檢舉

補充一下,倒影的效果看起來是用php處理的。

fillano iT邦超人 1 級 ‧ 2009-11-02 15:40:14 檢舉

另外,我好像沒看到什麼真正透明的東西...,上面那一排圖片,你用滑鼠右鍵點選後在新視窗或tab開啟,就會看到網址。透過query string的參數可以調整特效,你可以手動改改看...角度、灰階、倒影的距離、向左向右傾斜等都可以改。

chan15 iT邦新手 3 級 ‧ 2009-11-02 16:57:44 檢舉

不好意思,我不是說透明,倒影有個jquery可以作到
http://www.digitalia.be/software/reflectionjs-for-jquery
這滿好用的,我只的透視是像photoshop的perspective
正面變側面那樣。

fillano iT邦超人 1 級 ‧ 2009-11-02 17:26:56 檢舉

那是用php處理的...你看我上一篇回應的提示...

http://demos.dojotoolkit.org/demos/skew/imageReflect.php?greyscale=1&src=images/users/dante.jpg&skew=right&angle=25&spacing=5

這個網址實際上會回傳圖片,用skew可以改perspective的方向,angle可以改角度,你自己可以試試看。

fillano iT邦超人 1 級 ‧ 2009-11-02 17:29:40 檢舉

用canvas可以做,我記得很久以前幫人改過jquery的plugin,好像也是在ithelp。不過IE不支援canvas,在IE是用濾鏡做的。

fillano iT邦超人 1 級 ‧ 2009-11-02 17:35:00 檢舉

阿?找了一下發現,就是你問的嘛...
http://ithelp.ithome.com.tw/question/10022419

把這些方法改一下,也可以用他做出perspective的效果。

chan15 iT邦新手 3 級 ‧ 2009-11-02 18:20:50 檢舉

呵呵,對啊,那次是問旋轉,所以透視是php端處理的?

fillano iT邦超人 1 級 ‧ 2009-11-02 19:59:29 檢舉

就你提的例子,他透視是用php處理的。不過把旋轉的方法調整一下,也可以改成做透視。

fillano iT邦超人 1 級 ‧ 2009-11-10 13:07:52 檢舉

比較了一下:

  1. GD裡面有imagecopyresize或imagecopyresampled,可以把部份的image複製後縮小然後貼到新的image上,用這個函數來做perspective會比較方便
  2. Canvas只有create/get/putImageData,可以用來取出、貼上pixel,要resize的話要自己寫程式,用起來比較麻煩
  3. IE的transform濾鏡完全無法處理pixel,所以用IE是無法實現的

我要發表回答

立即登入回答