如何裁剪画布边？答案

【问题标题】：How to crop canvas sides?如何裁剪画布边？
【发布时间】：2019-05-04 03:10:27
【问题描述】：

大家好，我最近在做一个项目，我正在使用 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";

任何帮助都将是适当的，谢谢。

【问题讨论】：

标签： javascript css canvas crop trim

【解决方案1】：

首先您需要一个较小的画布元素，因此您需要在设置中定义它。假设你知道要裁剪多少，画布的宽度应该是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);    
}

【讨论】：