一个html5游戏 要求把图片 水平翻转  在网上找了资料要不是看不懂  就是看了没用  不满足需求

图片翻转  可以利用css  IE的滤镜   由于项目不需要兼容IE所以直接无视它 o(∩_∩)o 哈哈

图片翻转有以下几种方式：

css 

    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);   chrome   safari

    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);  FF

canvas

     1.像素级别的操作  canvas里面每个像素点都有保存rgb跟透明度  ctx.getImageData获取之后把像素点的值进行交换。

     2.画布翻转方式。

      //以右上点为中心 向右翻转画布

  　cxt.translate(canvas.width, 0);
     cxt.scale(-1, 1);
        //画图
     cxt.drawImage(img2, canvas.width -  img2.width*2, 0);
      //翻转回来
     cxt.translate(canvas.width, 0);
     cxt.scale(-1, 1);

这种操作既简单又方便