在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.