CanvasRenderingContext2D.isPointInPath()

Il metodo CanvasRenderingContext2D.isPointInPath() delle API Canvas 2D controlla se un punto specificato cade all'interno del path corrente.

Sintassi

boolean ctx.isPointInPath(x, y);
boolean ctx.isPointInPath(x, y, algorithmo);

boolean ctx.isPointInPath(path, x, y);
boolean ctx.isPointInPath(path, x, y, algoritmo);

Parametri

x

La coordinata X del punto da controllare

y

La coordinata Y del punto da controllare

Algoritmo

La'lgoritmo con cui viene verificato se il punto cade all'interno del path.
Valori possibili:

• "nonzero": La regola non-zero ,  valore predefinito.
• "evenodd": La regola even-odd .

path

Il Path2D path da usare come path corrente.

Restituisce

Boolean

Un Boolean, che sarà true (vero) se il punto cade all'interno della forma, altrimenti restitiusce false (falso).

Esempi

Uso del metodo isPointInPath

Questa è una semplice snippet che usa il metodo isPointInPath per controllare se un punto cade o no sulla forma corrente.

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.rect(10, 10, 100, 100);
ctx.stroke();
console.log(ctx.isPointInPath(10, 10)); // true

Modifica il codice qui sotto, e guarda live come cambia il canvas: per guardare i log apri la tua console

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.rect(10, 10, 100, 100);
ctx.stroke();
console.log(ctx.isPointInPath(10, 10)); // true</textarea>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

Specifiche

Compatibilità Browser

Note di compatibilità

• Prima di Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4), questo metodo sbagliava a moltiplicare le coordinate del punto specificato per la matrice di trasformazione corrente, prima di controllare il se il punto cadeva o no sul path. Ora il metodo funzioa correttamente anche se il contesto è ruotato, scalato o trasformato in altro modo.

Vedi anche

• L'interfaccia che lo definisce, CanvasRenderingContext2D.