Question

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

我有画布和几张图像。

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

我有这段代码：

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

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

1 个答案: