如何裁剪画布边？

Question

大家好，我最近正在从事一个项目，我正在使用HTML5，CSS3和javascript。

我有一个元素，并且正在输入网络摄像头捕获的。

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";

任何帮助都可以提供，谢谢。

Answer 1

首先，您需要一个较小的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);    
}