如何改变画布本身的形状？

Question

我正在做一个项目，我使用 createCapture(VIDEO); 使用 p5js 库，使用我的网络摄像头获取视频。 然后我存储该捕获的每个图像（来自 <video> 元素）并在函数 draw() 的画布中绘制它。

我想知道是否有可能改变画布的形状（例如镜子（椭圆形或圆形））。

再次注意，我不想裁剪图像而是裁剪画布本身。

这是一些代码：

function setup(){

   canvas = createCanvas(640, 480); //480p
   canvas.parent('editedCanvas-container');

   originalCapture = createCapture(VIDEO);
   originalCapture.parent('originalVideo-container');
   originalCapture.size(640, 480); //480p
}

function draw(){

   frame = image(originalCapture, 0, 0, width, height);
}

如果有人有线索，请告诉我。

Answer 1

您可以通过应用 css 规则来更改canvas标签的形状，

所以试试这个css代码

 #canvasObject { border: 2px solid black; width: 200px; height: 150px; border-radius: 100px / 50px; }

 <canvas id="canvasObject"> </canvas>

有关如何在 css 中实现形状的更多信息，请参阅这篇关于css-tricks 的精彩帖子