jquery - 如何从当前位置翻转 Canvas

Question

我正在尝试向 Canvas 添加翻转和旋转选项，但在我旋转之后，如果我翻转，它会从其页面加载位置而不是当前旋转位置翻转。

这是我用于翻转和旋转的 jQuery 代码:

    var k = 0;
            $('#flip_image_btn').click(function(){
                var j = $('.dithered-image');
                k += 180;
                $('.dithered-image').css({
                    "transform":"rotatey(" + k + "deg)",
                    "transitionDuration":"0.5s"
                });

            });


            var rotation = 0;
            $("#rotate_image_clockwise_btn").click(function(){ 
                rotation = rotation+18;                 
                $('.dithered-image').css("transform", "rotate("+rotation+"deg)");
            });
            $("#rotate_image_anticlockwise_btn").click(function(){ 
                rotation = rotation-18;                 
                $('.dithered-image').css("transform", "rotate("+rotation+"deg)");
            });

有没有办法让图片原样翻转，而不是回到加载位置再翻转？

这里有一个显示正在发生的事情的 fiddle https://jsfiddle.net/muugzans/1/

提前致谢

Answer 1

你需要组合它们，你正在做的是覆盖另一个转换，试试这个:

window.onload = function() {
  /*var c = document.getElementById("myCanvas");
  var ctx = c("2d");

  ctx.drawImage(img, 10, 10);*/
}
var k = 0;
var rotation = 0;
$('#flip_image_btn').click(function() {
  var j = $('.dithered-image');
  k += 180;
  $('.dithered-image').css({
    "transform": "rotate(" + rotation + "deg) rotatey(" + k + "deg)",
    "transitionDuration": "0.5s"
  });

});



$("#rotate_image_clockwise_btn").click(function() {
  rotation = rotation + 18;
  $('.dithered-image').css("transform", "rotate(" + rotation + "deg) rotatey(" + k + "deg)");
});
$("#rotate_image_anticlockwise_btn").click(function() {
  rotation = rotation - 18;
  $('.dithered-image').css("transform", "rotate(" + rotation + "deg) rotatey(" + k + "deg)");
});

.dithered-image {
  max-width: 550px;
  max-height: 350px;
  width: 100%;
  top: 130px;
  left: 150px;
}

.flipped {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

#myCanvas {
  width: 150px;
  height: auto;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<input type="button" class="button" value="Flip Image" id="flip_image_btn" />
<button style="font-size:24px" id="rotate_image_clockwise_btn">rotate</button>

<img class="dithered-image" id="myCanvas" src="https://cdn.pixabay.com/photo/2016/09/01/10/23/image-1635747_1280.jpg" width="100" />