很多时候拿到的素材都是单方向的,需要将其手动翻转来达到需求,比如下面这张图片:
它是朝右边方向的,但还需要一张朝左边方向的,于是不得不打开PS将其翻转然后做成雪碧图。如果只是一张图片还好说,但通常情况下图片可能有多个动作,这种情况下工作量就大大提升了,非常费时费力。好在canvas中提供了scale
方法用于翻转图片。在canvas的说明文档中,scale被介绍成用于放大或缩小图片,比如
scale(2,1)是图片宽度放大两倍,scale(1,0.5)是图片高度缩小为0.5倍,但有一个情况很少被提及,就是参数为负数的情况。现在有如下代码:
scale(-1,1);
这表示将图片水平翻转(同理Y轴上的负值表示垂直翻转),而翻转的参考点则是坐标原点:
不过仅仅这样是不能工作的,因为翻转过后的图片被绘制在了canvas画布的外边,需要将位置修正为-imageWidth,这样才能将坐标恢复到翻转前的位置。
以下是运行效果(用鼠标点击以获得焦点,使用键盘A/D键左右移动):
//
这种方法虽可减少工作量,但对性能有一定损耗,毕竟翻转图片还是要做一定量的计算的,使用时需要权衡一下。