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

【问题标题】：HTML5 canvas: Rotate cropped image within bounds on single canvasHTML5 画布：在单个画布的范围内旋转裁剪的图像
【发布时间】：2014-10-07 03:56:23
【问题描述】：

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

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

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

Welp 我很快就想通了，我意识到有一个剪辑工具，哇哦！

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

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

【讨论】：

【解决方案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;}

&lt;canvas id="canvas" width=300 height=300&gt;&lt;/canvas&gt;

【讨论】：

这是我已经在工作的。当我说裁剪图像时，我的意思是从字面上裁剪/放大图像。这不起作用。
澄清一下：您想剪辑现有画布的一部分并将其重绘到同一个画布上，同时重新绘制的图像被旋转和/或缩放？
我想在一个旋转的范围内剪辑图像 - 在单个画布上（我再次认为 addDraw 裁剪输入不可能）
答案已查。该动作需要 clip() 正确裁剪和裁剪图像。