如何仅水平翻转图像而不是画布？答案

【问题标题】：How to flip only the image horizontally not canvs?如何仅水平翻转图像而不是画布？
【发布时间】：2013-04-11 07:19:36
【问题描述】：

是否可以水平翻转包含在画布中但不包含画布的图片。

我有几张图片的画布。

我只想从画布内的所有图像中翻转一个图像。

我有这个代码：

var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = 10;
      var y = 10;
      var width = 200;
      var height = 137;
      var imageObj = new Image();

      imageObj.onload = function() {
        context.translate(width, 0);
        context.scale(-1, 1);
        context.drawImage(imageObj, x, y, width, height);
       };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

这些行：

context.translate(width, 0);
        context.scale(-1, 1);

将图像和画布一起翻转。

我想做这样的事情：

imageObj.translate(width, 0);
imageObj.scale(-1, 1);

怎么做？非常感谢。

【问题讨论】：

标签： javascript html image canvas

【解决方案1】：

这将在您绘制图像时旋转上下文，然后将其恢复。

var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = 10;
      var y = 10;
      var width = 200;
      var height = 137;
      var imageObj = new Image();

      imageObj.onload = function() {
        context.save();
        context.translate(width, 0);
        context.scale(-1, 1);
        context.drawImage(imageObj, x, y, width, height);
        context.restore();
       };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

【讨论】：