Estilos de relleno de lienzo HTML5 | TIEngranaje

Al dibujar en HTML5 Canvas, es bastante común llenar los objetos que se representan con color o patrones. Al rellenar las líneas o formas del lienzo con color, podemos aplicar un color sólido, un degradado lineal, un degradado radial o un patrón.

En este tutorial, veremos ejemplos de cada uno. En el proximo cuatro ejemplosdibujaremos un rectángulo en el elemento Canvas de HTML5 y mostraremos ejemplos para cada tipo de relleno.

Color sólido

Rellenar una forma con un color sólido es el método más fácil. Nosotros podemos usar fillStyle propiedad y fill() método.

context.fillStyle="#FFAA00";
context.fill();

<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.rect(0, 0, canvas.width, canvas.height);
    context.fillStyle="#FFAA00";
    context.fill();
</script>

Gradiente lineal

Para crear un gradiente lineal en HTML5 Canvas, podemos usar el createLinearGradient() método. Los gradientes lineales están definidos por creando límites en la dirección del degradado y rellenando con color usando el addColorStop propiedad.

La dirección del gradiente lineal se mueve desde el punto inicial hasta el punto final del límite imaginario definido con createLinearGradient() método. En este ejemplo, usaremos paradas de dos colores. Las paradas de color se colocan a lo largo de los límites entre 0 y 1, donde 0 está en el punto inicial y 1 está en el punto final.

var gradient = context.createLinearGradient(startX, startY, endX, endY);
gradient.addColorStop(offset, color);

<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.rect(0, 0, canvas.width, canvas.height);
    var gradient = context.createLinearGradient(0, 0, 0, canvas.height);
    gradient.addColorStop(0, '#FFAA00');   
    gradient.addColorStop(1, '#FFFF00');
    context.fillStyle = gradient;
    context.fill();
</script>

Gradiente radial

Para crear un gradiente radial con HTML5 Canvas, podemos usar el createRadialGradient() método. Los gradientes radiales se definen usando dos círculos imaginarios: un circulo inicial y un círculo final. El degradado comienza con el círculo inicial y se mueve hacia el círculo final.

var gradient = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);
gradient.addColorStop(offset, color);

<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.rect(0, 0, canvas.width, canvas.height);
    var gradient = context.createRadialGradient(250, 125, 20, 250, 125, 200);
    gradient.addColorStop(0, '#FFFF00');
    gradient.addColorStop(1, '#FFAA00');
    context.fillStyle = gradient;
    context.fill();
</script>

Relleno de patrón

Para crear un patrón en HTML5 Canvas, podemos usar el createPattern() método del contexto del lienzo que devuelve un objeto de patrón, establezca el fillStyle propiedad al objeto de patrón, y luego rellene la forma usando fill().

El createPattern() El método requiere un objeto de imagen y una opción de repetición, que puede ser repeat, repeat-x, repeat-yo no repeat. A menos que se especifique lo contrario, la repeat la opción es predeterminado para repetir.

var pattern = context.createPattern(imageObj, repeatOption);
context.fillStyle = pattern;
context.fill();

<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.rect(0, 0, canvas.width, canvas.height);
    var imageObj = new Image();
    imageObj.onload = function () {
        var pattern = context.createPattern(imageObj, 'repeat');
        context.rect(0, 0, canvas.width, canvas.height);
        context.fillStyle = pattern;
        context.fill();
    };
    imageObj.src="https://www.itgeared.com/html5-canvas-fill-styles-tutoral/bricks.jpg";
</script>