En este artículo, vamos a ver cómo dibujar un polígono de lienzo de color de relleno usando FabricJS. El polígono de lienzo significa que el polígono es móvil y se puede estirar según los requisitos. Además, el polígono se puede personalizar cuando se trata del color del trazo inicial, la altura, el ancho o el ancho del trazo.
Enfoque: para que esto sea posible, vamos a utilizar una biblioteca de JavaScript llamada FabricJS. Después de importar la biblioteca, crearemos un bloque de lienzo en la etiqueta del cuerpo que contendrá el polígono. Después de esto, inicializaremos las instancias de Canvas y el polígono proporcionado por FabricJS y habilitaremos el color de fondo del polígono de canvas usando la propiedad backgroundColor y representaremos el polígono en Canvas como se indica a continuación.
Sintaxis:
fabric.Polygon([
{ x: pixel, y: pixel },
{ x: pixel, y: pixel },
{ x: pixel, y: pixel},
{ x: pixel, y: pixel},
{ x: pixel, y: pixel }],
{
backgroundColor: 'string'
});
Parámetros: esta función acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:
- backgroundColor: este parámetro define el color de fondo del polígono.
Nota: Los píxeles de dimensión deben crear un polígono.
El siguiente ejemplo ilustra la propiedad Fabric.JS Polygon backgroundColor en JavaScript:
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Loading the FabricJS library -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
</script>
</head>
<body>
<div style="text-align: center;width: 600px;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<b>
Fabric.js | Polygon backgroundColor Property
</b>
</div>
<canvas id="canvas" width="600" height="200"
style="border:1px solid #000000;">
</canvas>
<script>
// Initiate a Canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate a polygon instance
var polygon = new fabric.Polygon([
{ x: 295, y: 10 },
{ x: 235, y: 198 },
{ x: 385, y: 78 },
{ x: 205, y: 78 },
{ x: 355, y: 198 }], {
backgroundColor: 'green'
});
// Render the polygon in canvas
canvas.add(polygon);
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA