javascript - 怎樣在canvas上讓圖片做tranform變換?
問題描述
例如我有一張圖片,如下圖所示
<img src='http://m.4tl426be.cn/wenda/image.jpg' style='transform: translate(6px, 6px) scale(1.5) rotate(100deg);'>
圖片的寬高是1280x600,并且transform屬性是transform: translate(6px, 6px) scale(1.5) rotate(100deg);
請問,我創建的一張1280x600的canvas畫布,要怎樣才能讓圖片按照transfrom的參數在畫布上做變換呢?
畫布最終的大小不會變化。
問題解答
回答1:這3個api在canvas上面的的ctx對象上面都有,樓主可以去查閱一下,但是樓主要注意一點canvas的變換是原點變換類似css屬性中transform-origin:0,0但是css變換這個屬性默認是center center所以這就涉及到了一個在canvas上面一個比較經典的問題叫如何如何移動錨點簡單來說利用了canvas的transform負值來做到的,手機打字無法給你演示了。
交樓主一個簡單方法,樓主把那圖片的transform-origin也設置成0,0,此時達到你之前的效果的參數就和canvas的值一模一樣了
在外面沒音電腦如果樓主還不明白回去后可以試著幫你實現下,但從成長角度推薦樓主根據樓上的鏈接自己寫出實現代碼
回答2:https://github.com/wanadev/pe... demo http://www.html5.jp/test/pers...這個可能幫到你
回答3:已經在這個問題下找到了答案,謝謝 @外籍杰克 的答案/q/10...
相關文章:
1. mysql 查詢身份證號字段值有效的數據2. python bottle跑起來以后,定時執行的任務為什么每次都重復(多)執行一次?3. 視頻文件不能播放,怎么辦?4. html5 - HTML代碼中的文字亂碼是怎么回事?5. python - 爬蟲模擬登錄后,爬取csdn后臺文章列表遇到的問題6. visual-studio - Python OpenCV: 奇怪的自動補全問題7. mysql - 分庫分表、分區、讀寫分離 這些都是用在什么場景下 ,會帶來哪些效率或者其他方面的好處8. javascript - 彈出一個子窗口,操作之后關閉,主窗口會得到相應的響應,例如網站的某些登錄界面,django后臺的管理等,這是怎么實現的呢?9. javascript - ios返回不執行js怎么解決?10. android - 分享到微信,如何快速轉換成字節數組
