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

debugcn 发表于 Dev

MKN Web Solutions

我正在尝试旋转图像，裁剪该图像，渲染到画布上；全部都在一个画布层中。我认为使用提供的API是不可能的，我想我必须先渲染第二个画布层，然后再将其渲染回原始层，对吗？

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

MKN Web Solutions

Welp，我很快就发现了这一点，但我意识到，这里有一个Clip工具，哇！

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

您需要设置路径并设置边界，然后关闭并修剪路径，然后应用旋转，然后应用drawImage（甚至不需要在其上应用裁剪）。

因此，即（v =对象； vp =位置； vc =裁剪尺寸； vs =图像尺寸）

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。