javascript - Wie transformiere ich Bilder auf Leinwand?
黄舟
黄舟 2017-05-16 13:23:58
0
3
463

Zum Beispiel habe ich ein Bild wie unten gezeigt

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

Die Breite und Höhe des Bildes beträgt1280x600,并且transform属性是transform: translate(6px, 6px) scale(1.5) rotate(100deg);

Entschuldigung, wie können die Parameter des von mir erstellten 1280x600的canvas画布,要怎样才能让图片按照transfrom auf der Leinwand transformiert werden?

Die endgültige Größe der Leinwand ändert sich nicht.

黄舟
黄舟

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

Antworte allen(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...

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage