admin管理员组文章数量:1322838
Hello i was wondering if its possible to make the backround of a canvas looks transparent (no color). The code snippet below shows an example of what im trying to explain.. Please if you have any suggestions let me know
function setup() {
createCanvas(400, 400);
}
function draw() {
/* How to make a transparent color????? */
background(220);
rect(100,100,100,200);
}html, body {
margin: 0;
padding: 0;
}<!DOCTYPE html>
<html>
<head>
<script src=".js/0.6.0/p5.min.js"></script>
<script src=".js/0.6.0/addons/p5.dom.min.js"></script>
<script src=".js/0.6.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>Hello i was wondering if its possible to make the backround of a canvas looks transparent (no color). The code snippet below shows an example of what im trying to explain.. Please if you have any suggestions let me know
function setup() {
createCanvas(400, 400);
}
function draw() {
/* How to make a transparent color????? */
background(220);
rect(100,100,100,200);
}html, body {
margin: 0;
padding: 0;
}<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare./ajax/libs/p5.js/0.6.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/p5.js/0.6.0/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/p5.js/0.6.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>- 2 It's right there in the documentation. – Pointy Commented Apr 9, 2018 at 14:01
- 1 As stated in the documentation, you can use rgba to specifiy a transparent background: background('rgba(123, 123, 123, 0.5)') – mind Commented Apr 9, 2018 at 14:03
-
1
remove
background(220);it wont draw any background, which will make canvas transparent. – Durga Commented Apr 9, 2018 at 14:04 - Not adding background seems to be a solution.. it works thanks @Durga – Loizos Vasileiou Commented Apr 9, 2018 at 14:57
4 Answers
Reset to default 4It depends on exactly what you mean by transparent.
If you want it to be pletely transparent, then you're probably looking for the clear() function. More info can be found in the reference, but to summarize: the clear() function acts like the background() function but makes everything transparent instead of any particular color.
If you want your background to be partially transparent, like a color that you can still see through, then you also need to add an alpha argument to your call to the background() function. Again, more info can be found in the reference, but here's an example:
function setup() {
createCanvas(400, 400);
}
function draw() {
clear();
background(220, 10);
rect(100, 100, 100, 200);
}
Note that you still need to call clear(), otherwise the transparent background is drawn on top of old scenes, which is probably not what you want.
Another option I found is to not call the background() function:
var check = false;
function setup(){
createCanvas(500,500);
}
function draw(){
fill(random(255),random(255),random(255));
rect(100,100,50,90);
}<script src="https://cdnjs.cloudflare./ajax/libs/p5.js/0.7.3/p5.js"></script>It depends on your meaning of transparent.
If you want the transparent like displaying trail in your animation, add alpha. Under/
background(0, 50);
The '50' number is alpha. The '0' number is black.
In your draw() function call the background function with the CSS property rgba and alpha=0:
function draw() {
clear();
background('rgba(255,255,255, 0)');
...
...
}
本文标签： cssIs it possible to make a transparent background color on javascript (p5js)Stack Overflow
版权声明：本文标题：css - Is it possible to make a transparent background color on javascript (p5js)? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742117202a2421523.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论