30度翻转影像？ [英] Flip images at 30 degrees?

问题描述

  vc.scale（-1， -1）
  

但是有没有办法在30度对称线上翻转图像？ p>

解决方案

是的，您可以使用 rotate（）画布方法：

  var ctx = document.getElementById（myCanvas）。getContext（2d）; var img = new Image（）; img.src =http：// photos .the-scientist.com / articleImages / 48000 / 48607-1-t.jpg; img.onload = function（）{ctx.rotate（30 * Math.PI / 180）; ctx.translate（ctx.canvas.width / 2，ctx.canvas.height / 2）; ctx.scale（1，-1）; ctx.drawImage（img，-65，65）;}  

 < canvas id =myCanvaswidth =300height =300>  

In canvas I know that I can flip images horizontally and vertically by doing this:

vc.scale(-1, -1)

But is there some way to flip an image along a 30 degree symmetry line?

解决方案

Yes, you can accomplish this using the rotate() method of canvas :

var ctx = document.getElementById("myCanvas").getContext("2d");
var img = new Image();
img.src = "http://photos.the-scientist.com/articleImages/48000/48607-1-t.jpg";
img.onload = function() {
    ctx.rotate(30 * Math.PI / 180);
    ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
    ctx.scale(1, -1);
    ctx.drawImage(img, -65, 65);
}

<canvas id="myCanvas" width="300" height="300">

这篇关于30度翻转影像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！