HTML5画布：在单个画布上旋转裁剪后的图像

Question

我试图旋转图像，裁剪，渲染到画布;全部在一个画布层中。我不认为用提供的API可能，我想我必须呈现第二个画布层，然后将其渲染回原始图层，是否正确？

据我所知，这是一个非常线性的画布过程：[翻译到图像中间]，[应用旋转]，[旋转回到左上角]，[用裁切值绘制图像]。

Answer 1

韦尔普我想通了不久，我意识到，有一个剪辑工具，哇哇！

基本上补丁（对于那些谁到这里来）是：

您需要设置的路径，并设置了边界，然后关闭&夹的路径，然后应用旋转，然后应用的drawImage（不甚至需要将作物施用于它）。

所以即（V =对象; v.p =位置; v.c =作物大小; v.s =图像大小）

  vb.ctx.beginPath(); 
      vb.ctx.moveTo(v.p[0], v.p[1]); 
      vb.ctx.lineTo(v.p[0]+v.c[0], v.p[1]); 
      vb.ctx.lineTo(v.p[0]+v.c[0], v.c[1]+v.p[1]); 
      vb.ctx.lineTo(v.p[0], v.c[1]+v.p[1]); 
      vb.ctx.lineTo(v.p[0], v.p[1]); 

      vb.ctx.closePath(); 
      vb.ctx.clip(); 

      vb.ctx.translate(v.p[0]+ (v.c[0]/2), v.p[1] + (v.c[1]/2)); 
      vb.ctx.rotate(v.rot); 
      vb.ctx.translate(0-(v.p[0]+ (v.c[0]/2)) , 0-(v.p[1] + (v.c[1]/2))); 

      vb.ctx.drawImage(v.dom, v.p[0], v.p[1], v.s[0], v.s[1]); 

Answer 2

您可以同时旋转和裁剪源图像到这样的画布：

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
ctx.fillStyle='red'; 
 
ctx.globalAlpha=0.50; 
 
ctx.fillRect(50,50,150,40); 
 
ctx.fillStyle='black'; 
 
ctx.globalAlpha=1.00; 
 
ctx.fillText("Crop Me!",55,65); 
 

 
var img=new Image(); 
 
img.onload=function(){ 
 
    ctx.translate(150,150); 
 
    ctx.scale(2,2); 
 
    ctx.rotate(Math.PI/4); 
 
    ctx.drawImage(img,50,50,75,20, -75/2,-20/2,75,20); 
 
}; 
 
img.src=canvas.toDataURL();

body{ background-color: ivory; padding:10px; } 
 
canvas{border:1px solid red;}

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