Canvas中图片翻转的应用

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

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

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

scale(-1,1);

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

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

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

 

 

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

转载于:https://www.cnblogs.com/undefined000/p/flip-an-image-with-the-html5-canvas.html