首页 > 代码库 > Canvas中图片翻转的应用

Canvas中图片翻转的应用

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

技术分享

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

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

scale(-1,1);

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

技术分享

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

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

 
<script type="text/javascript">// </script>

 

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

Canvas中图片翻转的应用