您可以使用临时画布来裁剪和取消旋转蓝色框。
- 从图像中剪切蓝色矩形的边界框
- 取消旋转边界框,使蓝色矩形未旋转(角度==0)
- 裁剪掉额外的边界框区域,只留下蓝色矩形
- 将蓝色矩形绘制到显示画布上
![enter image description here](https://istack.dev59.com/yqVje.webp)
这是代码和演示:http://jsfiddle.net/m1erickson/28EkG/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var blueX=421;
var blueY=343;
var blueWidth=81;
var blueHeight=44;
var blueAngle=-25.00*Math.PI/180;
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/temp6.jpg";
function start(){
var canvas1=document.createElement("canvas");
var ctx1=canvas1.getContext("2d");
var canvas2=document.createElement("canvas");
var ctx2=canvas2.getContext("2d");
var rectBB=getRotatedRectBB(blueX,blueY,blueWidth,blueHeight,blueAngle);
canvas1.width=canvas2.width=rectBB.width;
canvas1.height=canvas2.height=rectBB.height;
ctx1.drawImage(img,
rectBB.cx-rectBB.width/2,
rectBB.cy-rectBB.height/2,
rectBB.width,
rectBB.height,
0,0,rectBB.width,rectBB.height
);
ctx2.translate(canvas1.width/2,canvas1.height/2);
ctx2.rotate(-blueAngle);
ctx2.drawImage(canvas1,-canvas1.width/2,-canvas1.height/2);
var offX=rectBB.width/2-blueWidth/2;
var offY=rectBB.height/2-blueHeight/2;
canvas.width=blueWidth;
canvas.height=blueHeight;
ctx.drawImage(canvas2,-offX,-offY);
}
function getRotatedRectBB(x,y,width,height,rAngle){
var absCos=Math.abs(Math.cos(rAngle));
var absSin=Math.abs(Math.sin(rAngle));
var cx=x+width/2*Math.cos(rAngle)-height/2*Math.sin(rAngle);
var cy=y+width/2*Math.sin(rAngle)+height/2*Math.cos(rAngle);
var w=width*absCos+height*absSin;
var h=width*absSin+height*absCos;
return({cx:cx,cy:cy,width:w,height:h});
}
});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>