如何在JavaScript中将椭圆的背景设置为图像？

Question

我在p5库中使用javascript，目前我只知道如何使用fill（）函数用颜色填充椭圆。有没有办法将椭圆的背景设置为图像？

Answer 1

宁可设置背景，也可以尝试结合使用mask()方法和ellipse()方法：

let photo, maskImage

function preload() {
  photo = loadImage('https://picsum.photos/300/200')
}

function setup() {
  createCanvas(600, 200)
  background(125)
  image(photo, 0, 0);
  maskImage = createGraphics(300, 200)
  maskImage.ellipse(150, 100, 250, 150)
  photo.mask(maskImage)
  image(photo, 300, 0)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>