文章详情页
javascript - 怎样在canvas上让图片做tranform变换？
浏览：145日期：2023-01-01 08:07:18
问题描述
例如我有一张图片，如下图所示
<img src='https://www.haobala.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. javascript - $(document).scrollTop()与某个div的$(’#js_productWrap’).offset().top2. dockerfile - 我用docker build的时候出现下边问题 麻烦帮我看一下3. 小白学python的问题 关于%d和%s的区别4. docker绑定了nginx端口 外部访问不到5. javascript - 怎样去除数组里的几个值，只提供该数组的下标的话6. python - 学习模拟登录，卡在发送POST请求之后？7. python - ImportError: cannot import name ScopedSession8. javascript - 这是什么数组？9. css3 - 在width值与浏览器宽度是固定比例的情况下，css怎么设置div的高恒等于宽？10. html5 - optgroup满足不了需求
排行榜
网公网安备