由网友(铅笔画再美终究是灰色)分享简介:我已使用eginShape、endShape和curveVertex创建了一个形状。我的代码如下所示:function setup() {createCanvas(400, 400);}function draw() {background(220);strokeWeight(5);point(84, 91);poi...
我已使用eginShape、endShape和curveVertex创建了一个形状。我的代码如下所示:
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
strokeWeight(5);
point(84, 91);
point(68, 19);
point(21, 17);
point(32, 91);
strokeWeight(1);
fill(0); // HOW TO FILL WITH IMAGE
beginShape();
curveVertex(84, 91);
curveVertex(84, 91);
curveVertex(68, 19);
curveVertex(21, 17);
curveVertex(32, 91);
curveVertex(32, 91);
endShape(CLOSE);
}
我不想用颜色填充形状,而是想用图像填充它。P5.js可以吗?
推荐答案
您可以使用mask()函数来完成。在您的示例中,创建一个图形对象并绘制所需的形状,然后将其用作图像的蒙版:
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">let img
let shape
function preload(){
img = loadImage('https://picsum.photos/100')
}
function setup() {
createCanvas(300, 100);
// Create new p5 graphics object
shape = createGraphics(100, 100);
background(220);
// Draw the shape
shape.strokeWeight(5);
shape.point(84, 91);
shape.point(68, 19);
shape.point(21, 17);
shape.point(32, 91);
shape.strokeWeight(1);
shape.fill(0);
shape.beginShape();
shape.curveVertex(84, 91);
shape.curveVertex(84, 91);
shape.curveVertex(68, 19);
shape.curveVertex(21, 17);
shape.curveVertex(32, 91);
shape.curveVertex(32, 91);
shape.endShape(CLOSE);
image(img, 0, 0)
image(shape, 100, 0)
// Use the shape as a mask
img.mask(shape)
image(img, 200, 0)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.min.js"></script>
相关推荐
最新文章