剪辑图像以形成椭圆形（居中图像）

Question

我正在尝试将图像剪切成形状，然后在画布上绘制它们。我很好奇如何剪裁图像以将其作为椭圆形返回。我会使用arc()或bezierCurves()吗？

Answer 1

我认为最方便的方法是设置边框半径。

#hey{
  background:red;
  color:white;
  padding:5px;
  border-radius:5px; 
}

<div id="hey">hey</div>

如果你想用javascript做，你应该使用：

document.getElementById("hey").style.borderRadius="5px";

这也适用于图像。

Answer 2

您需要创建一个椭圆形剪切路径。您可以使用四条贝塞尔曲线近似椭圆。假设您希望椭圆适合矩形，曲线终点可以是矩形边的中点，曲线控制点可以位于矩形边的中点和角的两半之间。矩形。

例如，您可以将以下HTML代码用于canvas元素...

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

使用以下JavaScript代码使用大致椭圆的剪切路径绘制图像...

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var r = { x: 50, y: 50, w: 200, h: 150 };
var imag = new Image();
imag.src = "images/koala.png";
imag.addEventListener("load", function () {
    context.save();
    context.beginPath();
    context.moveTo(r.x + r.w, r.y + 0.5 * r.h);
    context.bezierCurveTo(r.x + r.w, r.y + 0.25 * r.h, r.x + 0.75 * r.w, r.y, r.x + 0.5 * r.w, r.y);
    context.bezierCurveTo(r.x + 0.25 * r.w, r.y, r.x, r.y + 0.25 * r.h, r.x, r.y + 0.5 * r.h);
    context.bezierCurveTo(r.x, r.y + 0.75 * r.h, r.x + 0.25 * r.w, r.y + r.h, r.x + 0.5 * r.w, r.y + r.h);
    context.bezierCurveTo(r.x + 0.75 * r.w, r.y + r.h, r.x + r.w, r.y + 0.75 * r.h, r.x + r.w, r.y + 0.5 * r.h);
    context.closePath();
    context.clip();
    context.drawImage(imag, r.x, r.y, r.w, r.h);
    context.restore();
});

创建椭圆路径的另一种解决方案是使用arc（）方法创建圆路径，然后使用scale（）方法将圆路径转换为椭圆路径。

Answer 3

您可以通过缩放圆圈（圆圈==圆弧）来绘制椭圆形，如下所示：

// Make an oval that's twice as tall as its width
// and draw it at the center of the canvas
var scaleX=1;
var scaleY=2;
var radius=canvas.width;
ctx.scale(scaleX,scaleY);
ctx.arc(canvas.width/scaleX/2,canvas.height/scaleY/2,radius,0,Math.PI*2);
ctx.fill();

然后您可以使用合成来绘制图像，使其仅显示在椭圆内。

这是通过context.globalCompositeOperation='source-atop'完成的，只有当新像素与现有的不透明像素重叠时才会出现这些像素：

折腾一点数学比例，甚至可以让椭圆形显示最大量的图像...

示例代码和演示：

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

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/kidwallpaper.jpg";
function start(){

  // resize the canvas to equal the image size
  var iw=img.width;
  var ih=img.height;
  cw=canvas.width=iw;
  ch=canvas.height=ih;

  // calculate the scaling needed to max the display of the image
  // inside the oval
  if(iw>ih){
    var scaleX=iw/ih
    var scaleY=1;
    var r=ih/2;
  }else{
    var scaleX=1;
    var scaleY=ih/iw;
    var r=iw/2;
  }

  // scale so the circle (arc) becomes an oval
  ctx.scale(scaleX,scaleY);
  ctx.arc(cw/scaleX/2,ch/scaleY/2,r,0,Math.PI*2);
  ctx.fill();

  // undo the scaling
  ctx.scale(1/scaleX,1/scaleY);

  // draw the image centered inside the oval using compositing
  ctx.globalCompositeOperation='source-atop';
  ctx.drawImage(img,cw/2-img.width/2,ch/2-img.height/2);
  ctx.globalCompositeOperation='source-atop';
}

body{ background-color: black; }
#canvas{border:1px solid red; margin:0 auto; }

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