Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.
Los resultados de tu búsqueda

    CanvasRenderingContext2D.beginPath()

    Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

    El método CanvasRenderingContext2D.beginPath() del API Canvas 2D comienza una nueva ruta vaciando la lista de sub-rutas. Invoca este método cuando quieras crear una nueva ruta. 

    Sintaxis

    void ctx.beginPath();

    Ejemplos

    Usando el método beginPath

    Este es solo un trozo de código el cual usa el método beginPath.

    HTML

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

    JavaScript

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

// First path
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.moveTo(20,20);
ctx.lineTo(200,20);
ctx.stroke();

// Second path
ctx.beginPath();
ctx.strokeStyle = 'green';
ctx.moveTo(20,20);
ctx.lineTo(120,120);
ctx.stroke();

    Edita el código aquí debajo y mira tus cambios actualizarse en vivo en el canvas:

    Playable code
    <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" style="height:200px">
// First path
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.moveTo(20,20);
ctx.lineTo(200,20);
ctx.stroke();

// Second path
ctx.beginPath();
ctx.strokeStyle = 'green';
ctx.moveTo(20,20);
ctx.lineTo(120, 120);
ctx.stroke();</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);

    Especificaciones

    Especificación Estatus Comentario
    WHATWG HTML Living Standard
    The definition of 'CanvasRenderingContext2D.beginPath' in that specification.    		 Living Standard  

    Compatibilidad de los navegadores

    Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Soporte básico (Yes) (Yes) (Yes) (Yes) (Yes)
    Característica Android Chrome para Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

    Ver también

    Etiquetas y colaboradores del documento

    Etiquetas: 
     Colaboradores en esta página: PepeBeat
     Última actualización por: PepeBeat,