【备忘】canvas下图片翻转-转自oldj.net(英杰兄)
by 岑安
at 2012-01-06 16:44:00
原文链接：http://oldj.net/article/flip-images-in-html5/
貌似 HTML5 的 Canvas 只提供了图片的旋转、缩放功能，没有提供图片翻转（水平翻转或垂直翻转）的支持，搜索加试验之后，得到几种实现图片翻转的方法，记录一下。
第一种最简单的是使用 CSS，代码片断如下：
3 | filter: FlipH; /* IE only */ |
4 | -moz-transform: matrix(-1, 0, 0, 1, 0, 0); |
5 | -webkit-transform: matrix(-1, 0, 0, 1, 0, 0); |
支持 IE 、Firefox 等各大浏览器。不过，如果想在 HTML5 的 Canvas 中翻转一个图片，CSS 就无能为力了。
在 Canvas 中翻转图片大致有两种思路，一种是先“翻转”画布，在上面画好需要的图片后再将画布“翻转”回来；另一种是先在画布上正常画上原图，用 getImageData 方法取得图片的每一个象素的数据，再将数据镜像交换一下。
先来看“翻转”画布的方法，代码大致类似于这样：
02 | // ctx.drawImage(img, px, py); |
05 | ctx.translate(canvas_width, 0); |
08 | ctx.drawImage(img, canvas_width - img.width - px, py); |
10 | ctx.translate(canvas_width, 0); |
可以看到，主要用到了 translate 以及 scale 方法。先用 translate 方法将坐标原点设为画布右上角（默认为左上角），再用 scale(-1, 1) 的方式将画布水平翻转，在上面画好图之后再恢复即可。
另一种象素级的操作原理上也非常简单，就不多解释了，可以直接看源码：
04 | <meta charset="UTF-8" /> |
06 | <style type="text/css"> |
08 | border: solid 1px #333; |
13 | <canvas id="cv" width="300" height="240"></canvas> |
15 | var canvas = document.getElementById("cv"), |
16 | ctx = canvas.getContext("2d"), |
19 | img.src = "/images/oldj_gmail.png"; |
23 | ctx.drawImage(img, 10, 10); |
26 | ctx.translate(300, 0); |
29 | ctx.drawImage(img, 300 - img.width - 10, 60); |
31 | ctx.translate(300, 0); |
35 | ctx.drawImage(img, 10, 110); |
49 | ctx.drawImage(img, px, py); |
51 | // 取得这个图片的数据，图片与当前页面必须同域，否则会出错 |
52 | var img_data = ctx.getImageData(px, py, img.width, img.height), |
60 | for (y = 0; y < h; y ++) { |
61 | for (x = 0; x < w_2; x ++) { |
62 | i = (y<<2) * w + (x<<2); |
63 | i2 = ((y + 1) << 2) * w - ((x + 1) << 2); |
64 | for (p = 0; p < 4; p ++) { |
65 | t = img_data.data[i + p]; |
66 | img_data.data[i + p] = img_data.data[i2 + p]; |
67 | img_data.data[i2 + p] = t; |
73 | ctx.putImageData(img_data, px, py); |
76 | img.onload = function () { |
本文链接
