javascript - 怎麼在canvas上讓圖片做tranform變換?
黄舟
黄舟 2017-05-16 13:23:58
0
3
488

例如我有一張圖片,如下圖所示

<img src="image.jpg" width="1280px" height="600px" class="face-image" style="transform: translate(6px, 6px) scale(1.5) rotate(100deg);">

圖片的寬高是1280x600,並且transform屬性是transform: translate(6px, 6px) scale(1.5) rotate(100deg);

#請問,我創建的一張1280x600的canvas畫布,要怎樣才能讓圖片按照transfrom的參數在畫布上做變換呢?

畫布最終的大小不會改變。

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回覆(3)
小葫芦

這3個api在canvas上面的的ctx對像上面都有,樓主可以去查閱一下,但是樓主要注意一點canvas的變換是原點變換類似css屬性中transform-origin:0,0但是css變換這個屬性預設是center center所以這就涉及到了一個在canvas上面一個比較經典的問題叫如何如何移動錨點簡單來說利用了canvas的transform負值來做到的,手機打字無法給你演示了。

交樓主一個簡單方法,樓主把那圖片的transform-origin也設定成0,0,此時達到你之前的效果的參數就和canvas的值一模一樣了

在外面沒音電腦如果樓主還不明白回去後可以試著幫你實現下,但從成長角度推薦樓主根據樓上的鏈接自己寫出實現代碼

仅有的幸福

https://github.com/wanadev/pe...
demo http://www.html5.jp/test/pers...
這可能幫到你

伊谢尔伦

已經在這個問題下找到了答案,謝謝 @外籍傑克 的答案
/q/10...

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板