2010-02-13 82 views
6

我使用processing.js 开发的JavaScript画笔应用它使用画布对象。我想保留一个图像在画布的背景。在前台绘制一些东西。而在保存时,我只需要获取前景数据。是否有可能建立透明画布

为此,我们需要做画布对象透明,使背景图像是可见的。

我没有看到任何选项,以使画布透明。我怎么做?

+3

下面回答? – Ross 2010-12-01 13:20:08

+1

正确答案是Jared's。为什么?因为原始的海报表示他需要用* ProcessingJS *来完成,它将所有带有灰色背景的画布元素渲染为* default *。他想覆盖这种默认行为。 – YOMorales 2011-06-25 22:30:37

回答

3
context.clearRect(0,0,width, height) 

是所有你需要=)

请记住,您可以在画布对象使用CSS样式。

canvas.style.position = "absolute"; 
canvas.style.left = the x position of the div you're going over +"px"; 
canvas.style.top = the y position of the div you're going over + "px"; 
0

为什么不把图像放在画布上,让你的笔画和填充透明?

6

<canvas>是默认透明。

我做了一个概念证明,可以在这里找到:

http://irae.pro.br/lab/canvas_pie_countdown/

测试针对IE6,IE7,IE8,火狐2,火狐3浏览器和iPhone。

+2

使用其他画布库/ API时可以使用。请注意,原始海报表示他需要使用* ProcessingJS *来完成,它将所有背景为灰色的画布元素渲染为* default *。他想覆盖这种默认行为。 Jared的回答实际上是正确的。 – YOMorales 2011-06-25 22:30:45

+0

你是对的。我想念解释这个问题。 – 2011-07-02 00:47:58

+0

没问题。我也犯我经常犯的错误。 ;) – YOMorales 2011-07-02 08:19:43

13

更妙的是,在你的PJS顶部只是把:

/* @pjs transparent=true; */ 

...然后在您的抽奖循环:

background(0, 0, 0, 0); 

瞧!

+4

使用* ProcessingJS *时的正确答案。它也解决了我的问题。 – YOMorales 2011-06-25 22:31:10