Canvas fillStyle none in HTML5

问题

I want to fill no color to canvas i.e. I want the background div color should keep on displaying in the div. I have googled it but didn't find any solution to keep fillStyle as no color.

Also I tried omitting the fillStyle but it leave me with black color.

Any options available?

Thanks

回答1:

You need to use this to clear the canvas:

context.clearRect(0, 0, canvas.width, canvas.height);

(or the rectangle you need).

Also make sure you have no CSS rules set for the canvas element's background (which might be the case if your canvas is not transparent on init as canvas is transparent as default).

If you need to clear a non-regular shape you can use composite mode:

context.globalCompositeOperation = 'destination-out';

(xor and source-out can also be used too to a certain degree too to remove existing pixels but with some variations).

This will clear the canvas in the form of the next shape (Path) you draw (or use an image which solid pixels will clear the canvas).

回答2:

I don't know what you're trying to do, but it seems you want to make your canvas transparent. You could do that in JavaScript:

context.fillStyle = "rgba(0, 0, 200, 0)";

Or in CSS, where foo would be the id of the canvas element. Note that this would make the element per se transparent, not just it's contents.

#foo {
    opacity: 0;
}

回答3:

You need to clear your canvas, not draw transparency... just think about that. You can't clean a glass, by using clear paint, the same is applied to the <canvas> element.

http://jsfiddle.net/Z6XTg/1/

this canvas demo does a very simple

ctx.clearRect(0,0,canvas.width,canvas.height);

before it draws anything, thus maintaining the canvas transparency.

来源：https://stackoverflow.com/questions/18598838/canvas-fillstyle-none-in-html5