問題描述

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

<img src='http://www.intensediesel.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);

請(qǐng)問，我創(chuàng)建的一張1280x600的canvas畫布，要怎樣才能讓圖片按照transfrom的參數(shù)在畫布上做變換呢？

畫布最終的大小不會(huì)變化。

問題解答

這3個(gè)api在canvas上面的的ctx對(duì)象上面都有，樓主可以去查閱一下，但是樓主要注意一點(diǎn)canvas的變換是原點(diǎn)變換類似css屬性中transform-origin:0,0但是css變換這個(gè)屬性默認(rèn)是center center所以這就涉及到了一個(gè)在canvas上面一個(gè)比較經(jīng)典的問題叫如何如何移動(dòng)錨點(diǎn)簡(jiǎn)單來說利用了canvas的transform負(fù)值來做到的，手機(jī)打字無法給你演示了。

交樓主一個(gè)簡(jiǎn)單方法，樓主把那圖片的transform-origin也設(shè)置成0,0，此時(shí)達(dá)到你之前的效果的參數(shù)就和canvas的值一模一樣了

在外面沒音電腦如果樓主還不明白回去后可以試著幫你實(shí)現(xiàn)下，但從成長(zhǎng)角度推薦樓主根據(jù)樓上的鏈接自己寫出實(shí)現(xiàn)代碼

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

已經(jīng)在這個(gè)問題下找到了答案，謝謝 @外籍杰克 的答案/q/10...