在p5.js中创建带有圆角的画布
[英]Create a canvas with rounded corners in p5.js
问题描述
我似乎在p5.js参考页上找不到有关如何通过createCanvas（）创建的画布上的圆角的任何信息。 对于矩形，这是可能的，因为函数采用的第五个输入是边界半径。 创建画布时情况并非如此。
我整理了一个小例子，展示了一个平角画布，里面有一个弯角矩形，目的是在画布的形状中体现出这一点。
任何帮助，将不胜感激。 谢谢。
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>
1 个解决方案
解决方案1
1 已采纳 2017-06-06 10:35:16
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，我将黑色帆布容器弄圆了。
p5.js canvas 不可见
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.