javascript - 如何只水平翻转图像而不是canvs？

Question

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

我有几幅图像的画布。

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

演示 jsFiddle

我有这个代码：

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);

怎么做？非常感谢。

Answer 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';