码迷,mamicode.com
首页 > 其他好文 > 详细

Canvas中图片翻转的应用

时间:2017-01-21 22:16:11      阅读:263      评论:0      收藏:0      [点我收藏+]

标签:jps   cio   cal   oaf   ase   usb   lsb   any   gwt   

很多时候拿到的素材都是单方向的,需要将其手动翻转来达到需求,比如下面这张图片:

技术分享

它是朝右边方向的,但还需要一张朝左边方向的,于是不得不打开PS将其翻转然后做成雪碧图。如果只是一张图片还好说,但通常情况下图片可能有多个动作,这种情况下工作量就大大提升了,非常费时费力。好在canvas中提供了scale方法用于翻转图片。在canvas的说明文档中,scale被介绍成用于放大或缩小图片,比如

scale(2,1)是图片宽度放大两倍,scale(1,0.5)是图片高度缩小为0.5倍,但有一个情况很少被提及,就是参数为负数的情况。现在有如下代码:

scale(-1,1);

这表示将图片水平翻转(同理Y轴上的负值表示垂直翻转),而翻转的参考点则是坐标原点:

技术分享

不过仅仅这样是不能工作的,因为翻转过后的图片被绘制在了canvas画布的外边,需要将位置修正为-imageWidth,这样才能将坐标恢复到翻转前的位置。

以下是运行效果(用鼠标点击以获得焦点,使用键盘A/D键左右移动):

 

 

这种方法虽可减少工作量,但对性能有一定损耗,毕竟翻转图片还是要做一定量的计算的,使用时需要权衡一下。

Canvas中图片翻转的应用

标签:jps   cio   cal   oaf   ase   usb   lsb   any   gwt   

原文地址:http://www.cnblogs.com/undefined000/p/flip-an-image-with-the-html5-canvas.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!