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

Question

I'm using javascript with the p5 library and currently I only know how to use the fill() function to fill an ellipse with a color. Is there a way to set the ellipse's background to an image?

Answer 1

Rather that setting a background you could try using the mask() method combined with the ellipse() method:

 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>

Answer 2

Instead of drawing an ellipse and setting the background, you can instead draw the image directly using the image() method.

If you want your image to be elliptic, and it isn't yet, try using a program like GIMP .