搜尋

首頁  >  問答  >  主體

javascript - 怎麼在canvas上讓圖片做tranform變換?

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

<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的參數在畫布上做變換呢?

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

黄舟黄舟2790 天前495

全部回覆(3)我來回復

  • 高洛峰

    高洛峰2017-05-16 13:25:58

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

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

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

    回覆
    0
  • 仅有的幸福

    仅有的幸福2017-05-16 13:25:58

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

    回覆
    0
  • 伊谢尔伦

    伊谢尔伦2017-05-16 13:25:58

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

    回覆
    0
  • 取消回覆