貌似 HTML5 的 Canvas 只提供了图片的旋转、缩放功能,没有提供图片翻转(水平翻转或垂直翻转)的支持,搜索加试验之后,得到几种实现图片翻转的方法,记录一下。

第一种最简单的是使用 CSS,代码片断如下:

<style>
.flip-x {
	filter: FlipH; /* IE only */
	-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
	-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
}
</style>
<img src="https://oldj.net/images/oldj.net.png" class="flip-x" />

支持 IE 、Firefox 等各大浏览器。不过,如果想在 HTML5 的 Canvas 中翻转一个图片,CSS 就无能为力了。

在 Canvas 中翻转图片大致有两种思路,一种是先“翻转”画布,在上面画好需要的图片后再将画布“翻转”回来;另一种是先在画布上正常画上原图,用 getImageData 方法取得图片的每一个象素的数据,再将数据镜像交换一下。

先来看“翻转”画布的方法,代码大致类似于这样:

// 正常绘制:
// ctx.drawImage(img, px, py);

// 水平“翻转”画布
ctx.translate(canvas_width, 0);
ctx.scale(-1, 1);
// 下面画的图片是水平翻转的
ctx.drawImage(img, canvas_width - img.width - px, py);
// 画布恢复正常
ctx.translate(canvas_width, 0);
ctx.scale(-1, 1);

可以看到,主要用到了 translate 以及 scale 方法。先用 translate 方法将坐标原点设为画布右上角(默认为左上角),再用 scale(-1, 1) 的方式将画布水平翻转,在上面画好图之后再恢复即可。

另一种象素级的操作原理上也非常简单,就不多解释了,可以直接看源码:

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>test</title>
<style type="text/css">
#cv {
border: solid 1px #333;
}
</style>
</head>
<body>
<canvas id="cv" width="300" height="240"></canvas>

var canvas = document.getElementById("cv"),
	ctx = canvas.getContext("2d"),
	img = new Image();

img.src = "/images/oldj_gmail.png";

function show() {
	// 正常图片
	ctx.drawImage(img, 10, 10);

	// 水平翻转
	ctx.translate(300, 0);
	ctx.scale(-1, 1);
	// 下面画的图片是水平翻转的
	ctx.drawImage(img, 300 - img.width - 10, 60);
	// 恢复正常
	ctx.translate(300, 0);
	ctx.scale(-1, 1);

	// 下面的图片是正常的
	ctx.drawImage(img, 10, 110);


	// 象素级水平翻转图片的方法
	show2();
}

function show2() {
	// 象素级水平翻转的方法

	// 先画一个正常的画片
	var px = 10,
		py = 160;

	ctx.drawImage(img, px, py);

	// 取得这个图片的数据,图片与当前页面必须同域,否则会出错
	var img_data = ctx.getImageData(px, py, img.width, img.height),

		x, y, p, i, i2, t,
		h = img_data.height,
		w = img_data.width,
		w_2 = w / 2;

	// 将 img_data 的数据水平翻转
	for (y = 0; y < h; y ++) {
		for (x = 0; x < w_2; x ++) {
			i = (y<<2) * w + (x<<2);
			i2 = ((y + 1) << 2) * w - ((x + 1) << 2);
			for (p = 0; p < 4; p ++) {
				t = img_data.data[i + p];
				img_data.data[i + p] = img_data.data[i2 + p];
				img_data.data[i2 + p] = t;
			}
		}
	}

	// 重绘水平翻转后的图片
	ctx.putImageData(img_data, px, py);
}

img.onload = function () {
	show();
};
</script>
</body>
</html>

最终效果如下图所示:

Canvas 水平翻转图片

如果你的浏览器支持 Canvas 标签,你也可以点击这儿查看示例。

不过,上面提到的两种方法都不是 HTML5 Canvas 原生支持的,性能上一定会有所损失。如果要频繁地翻转某个图像,看起来最好的办法还是先给它做一个镜像版本,而不是在程序里再翻转。