compensation circulaire régions du HTML5 Canvas

Si vous êtes de faire un jeu ou quelque chose où la compression de chaque bit de la performance est importante, regardez comment j'ai fait cette réponse: Toile - Remplir un rectangle dans tous les domaines qui sont entièrement transparent

Plus précisément, la modification de la réponse qui mène à ceci: http://jsfiddle.net/a2Age/2/

L'énorme plus ici:

• Pas utiliser des chemins d'accès (lent)
• Aucune utilisation de clips (lent)
• Pas besoin de les sauvegarder/restaurer (car il n'y a aucun moyen de réinitialiser la zone de découpe sans compensation de l'etat(1), cela signifie que vous devez utiliser les sauvegarder/restaurer aussi)

(1) en fait je s'est plaint de ce et resetClip() a été mis en officiel spec cause de ça, mais il faudra un certain temps avant de mettre en œuvre les navigateurs il.

Code

JS:

var ctx          = document.getElementById('canvas1').getContext('2d'),
    ambientLight = 0.1,
    intensity    = 1,
    radius       = 100,
    amb          = 'rgba(0,0,0,' + (1 - ambientLight) + ')';

addLight(ctx, intensity, amb, 200, 200, 0, 200, 200, radius); //First circle
addLight(ctx, intensity, amb, 250, 270, 0, 250, 270, radius); //Second circle
addLight(ctx, intensity, amb, 50, 370, 0, 50, 370, radius, 50); //Third!

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

function addLight(ctx, intsy, amb, xStart, yStart, rStart, xEnd, yEnd, rEnd, xOff, yOff) {
  xOff = xOff || 0;
  yOff = yOff || 0;

  var g = ctx.createRadialGradient(xStart, yStart, rStart, xEnd, yEnd, rEnd);
  g.addColorStop(1, 'rgba(0,0,0,' + (1 - intsy) + ')');
  g.addColorStop(0, amb);
  ctx.fillStyle = g;
  ctx.fillRect(xStart - rEnd + xOff, yStart - rEnd + yOff, xEnd + rEnd, yEnd + rEnd);
}

CSS:

canvas {
  border: 1px solid black;
  background-image: url('http://placekitten.com/500/500');
}

HTML:

<canvas id="canvas1" width="500" height="500"></canvas>

Vous avez quelques options.

Tout d'abord, voici une fonction que nous allons utiliser pour remplir un cercle.

var fillCircle = function(x, y, radius)
{
    context.beginPath();
    context.arc(x, y, radius, 0, 2 * Math.PI, false);
    context.fill();
};

---

clip()

var clearCircle = function(x, y, radius)
{
    context.beginPath();
    context.arc(x, y, radius, 0, 2 * Math.PI, false);
    context.clip();
    context.clearRect(x - radius - 1, y - radius - 1,
                      radius * 2 + 2, radius * 2 + 2);
};

Voir cela sur jsFiddle.

---

globalCompositeOperation

var clearCircle = function(x, y, radius)
{
    context.save();
    context.globalCompositeOperation = 'destination-out';
    context.beginPath();
    context.arc(x, y, radius, 0, 2 * Math.PI, false);
    context.fill();
    context.restore();
};

Voir cela sur jsFiddle.

---

Les deux ont donné le résultat souhaité sur l'écran, mais la performance n'était pas suffisant dans mon cas, comme je l'ai été de dessin et de compensation beaucoup de cercles de chaque image pour un effet. En fin de compte j'ai trouvé une autre méthode pour obtenir un effet similaire à ce que je voulais par simple tracé de lignes plus épaisses sur un arc, mais le ci-dessus peut toujours être utile à quelqu'un d'avoir différentes exigences de performance.

Où x = position de gauche, y = position de droite, r = rayon, et ctx = votre toile:

function clearCircle( x , y , r ){
    for( var i = 0 ; i < Math.round( Math.PI * r ) ; i++ ){
        var angle = ( i / Math.round( Math.PI * r )) * 360;
        ctx.clearRect( x , y , Math.sin( angle * ( Math.PI / 180 )) * r , Math.cos( angle * ( Math.PI / 180 )) * r );
    }
}