
我们可以通过创建fabric.Polygon的实例来创建Polygon对象。多边形对象的特征可以是由一组连接的直线段组成的任何闭合形状。由于它是 FabricJS 的基本元素之一,因此我们还可以通过应用角度、不透明度等属性轻松自定义它。
为了将多边形对象转换为 HTMLCanvasElement,我们使用 toCanvasElement 方法。它返回 HTMLCanvasElement 类型的 DOM 元素,该接口从 HTMLElement 接口继承其属性和方法。我们使用 getContext 方法在画布上查找绘图上下文。如果不支持上下文 ID,则返回 null 值。
语法
HTMLCanvasElement.getContext():
示例 1:使用 toCanvasElement 方法
让我们看一个代码示例,以查看使用 toCanvasElement 方法时记录的输出。使用 toCanvasElement 方法时,将返回 HTMLCanvasElement 类型的 DOM 元素。您可以从开发工具打开控制台以查看正在返回 HTMLCanvasElement 类型的 DOM 元素。
Using the toCanvasElement method
You can open console from dev tools to see the logged output
立即学习“前端免费学习笔记(深入)”;
示例2:使用getContext方法
让我们看一个代码示例,看看使用 getContext 方法和 toCanvasElement 方法查找转换为 HTMLCanvasElement 的 Polygon 对象的绘图上下文时记录的输出。绘图上下文让我们可以在画布上绘图。由于我们向 getContext 方法传递了值“2d”,因此会返回一个 CanvasRenderingContext2D 对象。
Using getContext method
You can open console from dev tools to see that the CanvasRenderingContext2D object is being returned
结论
在本教程中,我们使用两个简单的示例来演示如何找到使用 FabricJS 转换为 HTMLCanvasElement 的 Polygon 对象的绘图上下文。











