Lienzo HTML5: Curvas | TIEngranaje

Caminos dibujados en un Lienzo HTML5 es simplemente una serie de puntos con instrucciones de dibujo entre esos puntos. Por ejemplo, puede haber una serie de puntos definidos en el lienzo con líneas o arcos dibujados entre ellos. Las rutas se pueden usar para dibujar varios tipos de formas, como líneas, círculos, rectángulos, y otros polígonos de varios lados.

Para crear una ruta en HTML5 Canvas, podemos conectarnos varios subcaminos. El punto final de cada nuevo subtrayecto se convierte en el nuevo punto de contexto.

Podemos usar muchos métodos para lograr esto, como el lineTo(), arcTo(), quadraticCurveTo()y bezierCurveTo() métodos. También podemos usar el beginPath() método cada vez que queremos empezar a dibujar un nuevo camino y closePath().

Curvas cuadráticas

Para dibujar una curva cuadrática en HTML5 Canvas, podemos usar el quadraticCurveTo() método.

<script>
    context.quadraticCurveTo(controlX, controlY, endX, endY);
</script>

Las curvas cuadráticas están definidas por el punto inicial, un punto de control y un punto final.

<canvas id="myCanvas" width="500" height="250">
    Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.beginPath();
    context.moveTo(50, 50);
    context.quadraticCurveTo(50, 150, 200, 50);
    context.lineWidth = 3;
    context.strokeStyle="#FFAA00";
    context.stroke();
</script>

bezierCurveTo()

Para dibujar una curva bezier en HTML5 Canvas, podemos usar el bezierCurveTo() método.

<script>
    context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
</script>

Las curvas de Bézier están definidas por el punto inicial, dos puntos de control y un punto final.

<canvas id="myCanvas" width="500" height="250">
    Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.beginPath();
    context.moveTo(50, 50);
    context.bezierCurveTo(50, 200, 200, 200, 200, 50);
    context.lineWidth = 3;
    context.strokeStyle="#FFAA00";
    context.stroke();
</script>

Ejemplo de nube

En este ejemplo, usaremos curvas Bezier para dibujar una nube simple.

<canvas id="myCanvas" width="500" height="250">
    Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var x = 125;
    var y = 100;
    context.beginPath();
    context.moveTo(x, y);
    context.bezierCurveTo(x - 40, y + 20, x - 40, y + 70, x + 60, y + 70);
    context.bezierCurveTo(x + 80, y + 100, x + 150, y + 100, x + 170, y + 70);
    context.bezierCurveTo(x + 250, y + 70, x + 250, y + 40, x + 220, y + 20);
    context.bezierCurveTo(x + 260, y - 40, x + 200, y - 50, x + 170, y - 30);
    context.bezierCurveTo(x + 150, y - 75, x + 80, y - 60, x + 80, y - 30);
    context.bezierCurveTo(x + 30, y - 75, x - 20, y - 60, x, y);
    context.closePath();
    context.fillStyle = "#EFEFEF";
    context.fill();
    context.lineWidth = 3;
    context.strokeStyle="#AAAAAA";
    context.stroke();
</script>