javascript - 在 HTML5 Canvas 中将图像裁剪成椭圆形

Question

我一直在尝试使用创建另一个 Canvas 、剪裁、保存然后将图像绘制到我的主 Canvas 上的方法将图像裁剪成椭圆形。然而，它只显示黑色椭圆，上面没有图像

var Ctx = document.getElementById('canvas').getContext('2d');
var tCan = document.createElement('canvas');
var tCtx = tCan.getContext('2d');


tCtx.beginPath();
var centerX = 50;
var centerY = 50;
var width = 100;
var height = 100;

tCtx.moveTo(centerX, centerY - height/2);

tCtx.bezierCurveTo(
centerX + width/2, centerY - height/2,
centerX + width/2, centerY + height/2,
centerX, centerY + height/2);

tCtx.bezierCurveTo(
centerX - width/2, centerY + height/2,
centerX - width/2, centerY - height/2,
centerX, centerY - height/2);

tCtx.fillStyle = "black";
tCtx.fill();
tCtx.closePath();   

var img = new Image();
img.onload = function(){
tCtx.drawImage(img,1,1, 98, 98);
};

img.src = 'http://imgur.com/GvRewu7.png';

tCtx.clip();

var cSi = tCan.toDataURL();

var cImg = new Image();
cImg.src = cSi;

Ctx.drawImage(cImg,0,0);

为什么这不包括裁剪后的图像？有没有其他方法可以做到这一点(完全在 javascript 中)？

编辑:我的事件 JSBin 页面:https://jsbin.com/yulituc/edit?js,output

Answer 1

jsFiddle:https://jsfiddle.net/mdofqjx2/3/

您还没有将新的 canvas 元素附加到页面。我已经在下面为您修复了它

HTML:

<canvas id="canvas" width="400" height="400">
</canvas>
<canvas id="canvas2" width="400" height="400">
</canvas>

Javascript:

var Ctx = document.getElementById('canvas').getContext('2d');
var tCan = document.getElementById('canvas2');
var tCtx = tCan.getContext('2d');

tCtx.beginPath();
var centerX = 50;
var centerY = 50;
var width = 100;
var height = 100;

tCtx.moveTo(centerX, centerY - height/2);

tCtx.bezierCurveTo(
centerX + width/2, centerY - height/2,
centerX + width/2, centerY + height/2,
centerX, centerY + height/2);

tCtx.bezierCurveTo(
centerX - width/2, centerY + height/2,
centerX - width/2, centerY - height/2,
centerX, centerY - height/2);

tCtx.fillStyle = "black";
tCtx.fill();
tCtx.closePath();   

var img = new Image();
img.onload = function(){
tCtx.drawImage(img,1,1, 98, 98);
};

img.src = 'http://imgur.com/GvRewu7.png';

tCtx.clip();

var cSi = tCan.toDataURL();

---

通过椭圆裁剪图像的简单方法

jsFiddle:https://jsfiddle.net/mdofqjx2/1/

您可以创建一条路径，然后绘制一个圆圈。如果你想画一个椭圆，只需修改比例 ctx.scale

var c = document.getElementById('myCanvas');
var ctx = c.getContext("2d");

var img = new Image();
img.src = "https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg";

img.onload = function()
{
    ctx.fillRect(0,0,c.width,c.height);

    ctx.save();
    ctx.scale(2,1);
    ctx.beginPath();
    ctx.arc(150, 150, 150, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.clip();
    ctx.scale(0.5,1);
    ctx.drawImage(img, 0, 0);
    ctx.restore(); 
}