如何改變畫布本身的形狀？

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 的精彩帖子