HTML5画布：在单个画布上的边界内旋转裁剪图像

Question

我正在尝试旋转图像，裁剪图像，渲染到画布;所有在一个画布层。我不认为使用提供的API是可能的，我认为我必须渲染第二个画布层，然后将其渲染回原始图层，对吗？

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

Answer 1

Welp我很快意识到这一点，我意识到它有一个Clip工具，哇哇！

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

您需要设置路径并设置边界，然后关闭＆amp;剪辑路径，然后应用旋转，然后应用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

您可以同时将源图像旋转并裁剪到画布上，如下所示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;