在HTML5画布中将图像裁剪为椭圆形

Cropping Image to Oval in HTML5 Canvas

本文关键字：裁剪 椭圆形 图像 HTML5 布中      更新时间：2023-09-26

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

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，输出

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(); 
}
相关文章：