gpt4 book ai didi

javascript - 在 p5.js 中创建圆 Angular Canvas

转载 作者:行者123 更新时间:2023-12-03 04:09:31 25 4
gpt4 key购买 nike

我似乎在 p5.js 引用页上找不到任何关于如何在通过 createCanvas() 创建的 Canvas 上圆 Angular 的信息。对于矩形来说这是可能的,因为函数采用的第五个输入是边框半径。创建 Canvas 时并非如此。

我整理了一个小例子,展示了一个平 Angular Canvas ,里面有一个弯 Angular 矩形,我的目标是在 Canvas 的形状中反射(reflect)出来。

如有任何帮助,我们将不胜感激。谢谢。

function setup() {
createCanvas(200,200);
}

function draw() {
background(32);
rectangle();
}

function rectangle() {
stroke(255);
fill(255,255,255,100);
rect(70,70,60,60,10);
}
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/p5.js"></script>
</head>
<body>
</body>

最佳答案

function setup() {
createCanvas(200,200);
}

function draw() {
background(32);
rectangle();
}

function rectangle() {
stroke(255);
fill(255,255,255,100);
rect(70,70,60,60,10);
}
canvas {
border-radius: 12px;
}
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/p5.js"></script>
</head>
<body>
</body>

你想得到这样的东西吗?通过 css,我将黑色 Canvas 容器圆 Angular 化。

关于javascript - 在 p5.js 中创建圆 Angular Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44387614/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com