如何裁剪帆布边？

Posted 2021-04-03

大家好，我最近在一个项目上工作，我正在使用html5，CSS3和javascript。

我有一个<canvas>元素，我正在提供网络摄像头捕获的<image>。

var myCanvas, videoElement, frame;

我正在使用p5Js库使用以下代码每帧提供图像：

function setup()
    myCanvas = createCanvas(w,h);
    //...(setId(), setParent(),)
    videoElement = createCapture(VIDEO);
    //...(setParent(), setId(), setSize())
}
function draw(){

   frame = image(videoElement, 0, 0, canvasWidth,  canvasHeight);    
}

我的问题是如何裁剪画布的两侧，如下图1所示：

请注意，我不想裁剪图像，因为如果我在画布上进行裁剪，也会在图像中实现裁剪。

现在我使用下面的CSS，但这不是我正在寻找的：

document.getElementById("editingCanvas-element").style.border = "1px solid black";
document.getElementById("editingCanvas-element").style.borderRadius = "100px 100px";

任何帮助都是有益的，谢谢。

答案

首先，您需要一个较小的canvas元素，因此您需要在设置中定义它。假设你知道要裁剪多少，画布的宽度应该是w - 2*crop

然后在绘制视频时：frame = image(videoElement, -crop, 0, canvasWidth, canvasHeight);我希望这是你需要的。

function setup()
    myCanvas = createCanvas(w - 2*crop,h);
    //...(setId(), setParent(),)
    videoElement = createCapture(VIDEO);
    //...(setParent(), setId(), setSize())
}
function draw(){

   frame = image(videoElement, -crop, 0, canvasWidth,  canvasHeight);    
}