画布 - 在完全透明的所有区域填充矩形 [英] Canvas - Fill a rectangle in all areas that are fully transparent

问题描述

我在使用HTML5 canvas编写一个简单的2D游戏引擎。我来添加一个照明引擎。每个光源具有半径值和强度值（0-1，例如1将非常亮）。还有一个环境光值，用于点亮世界上没有光源（0-1，例如0.1将是月光）附近的一切。照明的过程在主画布上方的单独画布上完成：

1. 对于每个光源，在该位置绘制径向渐变具有与光源相同的半径。梯度给出两个停止：中心是黑色的，具有1-强度的光的α，并且末端/边缘是黑色的，具有1-环境光值的α。


2. 这是错误的地方：/我需要用黑色和1-环境光值的alpha填充整个画布，在这一刻，我这样做将context.globalCompositeOperation设置为source-out，然后fillRecting整个画布。

我的代码为：

  var amb ='rgba（0,0,0，'+（1-f.ambientLight）+'）'; 
 for（i in f.entities）{
 var e = f.entities [i]，p = f.toScreenPoint（e.Position.x，e.position.y），radius = e。光半径
 
 if（radius> 0）{
 var g = cxLighting.createRadialGradient（p.x，p.y，0，p.x，p.y，radius）; 
 g.addColorStop（0，'rgba（0,0,0，'+（1-e.light.intensity）+'）'）; 
 g.addColorStop（1，amb）; 
 
 cxLighting.fillStyle = g; 
 cxLighting.beginPath（）; 
 cxLighting.arc（p.x，p.y，radius，0，Math.PI * 2，true）; 
 cxLighting.closePath（）; 
 cxLighting.fill（）; 
} 
} 
 //环境光
 cxLighting.globalCompositeOperation ='source-out'; 
 cxLighting.fillStyle = amb; 
 cxLighting.fillRect（0，0，f.width，f.height）; 
 cxLighting.globalCompositeOperation ='source-over'; 
  

然而，不是得到我从引擎（左）反向梯度（右）。我认为这是因为当我用 source-out 复合操作绘制矩形时，它会影响渐变本身的颜色，因为它们是半透明的。

有什么办法不同或更好？

此外，我修改了Mozilla开发中心的

额外优化：您可以根本不使用任何路径实现效果，简单地绘制完全相同的径向渐变到矩形，而不是圆形路径：

http://jsfiddle.net/a2Age/2/
希望有所帮助！

I'm writing a simple 2D game engine using the HTML5 canvas. I've come to adding a lighting engine. Each light source has a radius value and an intensity value (0-1, eg 1 would be very bright). There's also an ambient light value that is used to light everything else in the world that isn't near a light source (0-1, eg 0.1 would be moonlight). The process of lighting is done on a separate canvas above the main canvas:

1. For each light source, a radial gradient is drawn at that position with the same radius as the light source. The gradient is given two stops: the center is black with an alpha of 1-intensity of the light and the end/edge is black with alpha of 1-ambient light value. That all works fine.
2. This is where it goes wrong :/ I need to fill the whole canvas with black with and alpha of 1-ambient light value and at the moment I do this by setting the context.globalCompositeOperation to source-out then fillRecting the whole canvas.

My code for this stuff is:

var amb = 'rgba(0,0,0,' + (1-f.ambientLight) + ')';
for(i in f.entities) {
    var e = f.entities[i], p = f.toScreenPoint(e.position.x, e.position.y), radius = e.light.radius;

    if(radius > 0) {
        var g = cxLighting.createRadialGradient(p.x, p.y, 0, p.x, p.y, radius);
        g.addColorStop(0, 'rgba(0,0,0,' + (1-e.light.intensity) + ')');
        g.addColorStop(1, amb);

        cxLighting.fillStyle = g;
        cxLighting.beginPath();
        cxLighting.arc(p.x, p.y, radius, 0, Math.PI*2, true);
        cxLighting.closePath();
        cxLighting.fill();
    }
}
//Ambient light
cxLighting.globalCompositeOperation = 'source-out';
cxLighting.fillStyle = amb;
cxLighting.fillRect(0, 0, f.width, f.height);
cxLighting.globalCompositeOperation = 'source-over';

However instead of getting what I wan't out of the engine (left) I get a kind of reversed gradient (right). I think this is because when I draw the rectangle with the source-out composite operation it affects the colours of the gradient itself because they are semi-transparent.

Is there a way to do this differently or better? Using clipping maybe, or drawing the rect over everything first?

Also, I modified the Mozila Dev Centre's example on composting to replicate what I need to do and none of the composite modes seemed to work, check that out if it would help.

Thanks very much, any answer would be great :)

解决方案

One trivial way would be to use imageData but that would be painfully slow. It's an option, but not a good one for a game engine.

Another way would be to think of the ambient light and the light-source as if they were one path. That would make it very easy to do:

http://jsfiddle.net/HADky/

Or see it with an image behind: http://jsfiddle.net/HADky/10/

The thing you're taking advantage of here is the fact that any intersection of a path on canvas is always only unioned and never compounded. So you're using a single gradient brush to draw the whole thing.

But it gets a bit trickier than that if there's more than one light-source. I'm not too sure how to cover that in an efficient way, especially if you plan for two light-sources to intersect.

What you should probably do instead is devise an alpha channel instead of this overlay thing, but I can't currently think of a good way to get it to work. I'll revisit this if I think of anything else.

---

EDIT: Hey! So I've done a bit of thinking and came up with a good solution.

What you need to do is draw a sort of alpha channel, where the dark spots mark the places where you want light to be. So if you had three light sources it would look like this:

Then you want to set the fill style to your ambient color and set the globalCompositeOperation to xor and xor the whole thing.

ctx.fillStyle = amb;
ctx.globalCompositeOperation = 'xor';
ctx.fillRect(0,0,500,500);

That will leave you with the "opposite" image except the transparent parts will be correctly ambient:

Here's a working example of the code:

http://jsfiddle.net/a2Age/

Extra optimization: You can actually achieve the effect without using any paths at all, by simply drawing the exact same radial gradients onto rects instead of circular paths:

http://jsfiddle.net/a2Age/2/ Hope that helps!

这篇关于画布 - 在完全透明的所有区域填充矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！