文章詳情頁
javascript - 怎樣在canvas上讓圖片做tranform變換？
瀏覽：99日期：2023-01-01 08:07:18
問題描述
例如我有一張圖片，如下圖所示
<img src='http://www.gepszalag.com/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...
標簽：
JavaScript
相關文章：
1. python - 如何統計一份英文 API 開發文檔（如 javadoc文檔）的詞頻？2. mysql優化 - mysql 一張表如果不能確保字段列長度一致，是不是就不需要用到char。3. python - oslo_config4. 請教一個mysql去重取最新記錄5. python - 請問這兩個地方是為什么呢？6. python - 為什么match匹配出來的結果是<_sre.SRE_Match object; span=(0, 54), match=’’>7. javascript - 按鈕鏈接到另一個網址 怎么通過百度統計計算按鈕的點擊數量8. 人工智能 - python 機器學習 醫療數據 怎么學9. php - 有關sql語句反向LIKE的處理10. 大家都用什么工具管理mysql數據庫？
排行榜
網公網安備