FabricJS - Find the drawing context of a Polygon object converted to an HTMLCanvasElement?-JS Tutorial-php.cn

FabricJS - Find the drawing context of a Polygon object converted to an HTMLCanvasElement?

WBOY

Release： 2023-08-30 17:33:06

forward

695 people have browsed it

FabricJS – 查找转换为 HTMLCanvasElement 的 Polygon 对象的绘图上下文？

We can create Polygon objects by creating instances of fabric.Polygon. A polygon object can be characterized as any closed shape consisting of a set of connected straight line segments. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties such as angle, opacity, etc.

To convert a polygon object to a HTMLCanvasElement, we use the toCanvasElement method. It returns a DOM element of type HTMLCanvasElement, which inherits its properties and methods from the HTMLElement interface. We use the getContext method to find the drawing context on the canvas. If the context ID is not supported, a null value is returned.

Grammar

HTMLCanvasElement.getContext():

Copy after login

Example 1: Using toCanvasElement method

Let's look at a code example to see the output logged when using the toCanvasElement method. When using the toCanvasElement method, a DOM element of type HTMLCanvasElement is returned. You can open the console from the dev tools to see that the DOM element of type HTMLCanvasElement is being returned.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Using the toCanvasElement method</h2>
   <p>You can open console from dev tools to see the logged output</p>
   <canvas id="canvas"></canvas> 
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a polygon object
      var polygon = new fabric.Polygon(
         [
            { x: 600, y: 310 },
            { x: 650, y: 450 },
            { x: 600, y: 480 },
            { x: 550, y: 480 },
            { x: 450, y: 460 },
            { x: 300, y: 210 },
         ],
         {
            fill: "#778899",
            stroke: "blue",
            strokeWidth: 5,
            top: 50,
            left: 100,
            scaleX: 0.5,
            scaleY: 0.5,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using toCanvasElement method
      console.log(
         "The output on using toCanvasElement method is:",
         polygon.toCanvasElement()
      );
   </script>
</body>
</html>

Copy after login

Example 2: Using the getContext method

Let's look at a code example of the output logged when using the getContext method and the toCanvasElement method to find the drawing context of a Polygon object converted to an HTMLCanvasElement. The drawing context allows us to draw on the canvas. Since we passed the value "2d" to the getContext method, a CanvasRenderingContext2D object is returned.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Using getContext method</h2>
   <p>
      You can open console from dev tools to see that the CanvasRenderingContext2D object is being returned
   </p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a polygon object
      var polygon = new fabric.Polygon(
         [
            { x: 600, y: 310 },
            { x: 650, y: 450 },
            { x: 600, y: 480 },
            { x: 550, y: 480 },
            { x: 450, y: 460 },
            { x: 300, y: 210 },
         ],
         {
            fill: "#778899",
            stroke: "blue",
            strokeWidth: 5,
            top: 50,
            left: 100,
            scaleX: 0.5,
            scaleY: 0.5,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using toCanvasElement method
      var polygonCanvas = polygon.toCanvasElement({
         width: 200,
      });
      
      // Using getContext method
      console.log(
         "The drawing context of a Polygon object converted to HTMLCanvasElement is as follows:",
         polygonCanvas.getContext("2d")
      );
   </script>
</body>
</html>

Copy after login

in conclusion

In this tutorial, we use two simple examples to demonstrate how to find the drawing context of a Polygon object converted to an HTMLCanvasElement using FabricJS.

The above is the detailed content of FabricJS - Find the drawing context of a Polygon object converted to an HTMLCanvasElement?. For more information, please follow other related articles on the PHP Chinese website!