js有辦法作到透視嗎？

javascript jquery

chan15 2009-11-02 15:12:02 ‧ 7976 瀏覽

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

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

fillano

iT邦超人 1 級 ‧ 2009-11-02 15:31:49

最佳解答

找一下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邦新手 2 級 ‧ 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處理的...你看我上一篇回應的提示...

這個網址實際上會回傳圖片，用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邦新手 2 級 ‧ 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 檢舉

比較了一下：

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