HTML Canvas - 路径

路径是点的连续映射，作为一个轨迹，它没有重复的顶点，并且可以以任何角度前进，直到到达最终目标点。

CanvasRenderringContext2D 和 Path2D 接口包含属性和方法，可以使用接口的上下文对象将路径添加到画布元素上。该接口可用于添加路径以及在 <canvas> 元素上关闭路径。

在 Canvas 元素内添加路径和绘制形状可用的属性和方法如下表所示。

序号	方法及描述
1	addPath() 此方法可用于为当前路径添加额外的路径。
2	arc() Canvas API 的 arc() 方法可用于在开始的路径上绘制圆弧。
3	arcTo() Canvas API 的 arcTo() 方法可用于使用给定的控制点和半径作为参数，在当前路径上绘制圆弧。
4	beginPath() 当我们要使用路径在 Canvas 元素上绘制图形时，我们调用此方法来创建一个新的路径。
5	bezierCurveTo() CanvasRenderingContext2D 接口的 bezierCurveTo() 方法绘制
6	clip() 此方法用于裁剪路径的区域并在其中绘制其他图形。
7	closePath() closePath() 方法通过执行必要的操作来关闭当前路径。
8	drawFocusIfNeeded() 要将焦点添加到现有路径或即将创建的路径，接口可以调用此方法。
9	ellipse() 此方法用于在 Canvas 元素的绘图表面上绘制椭圆弧。
10	fill() 此方法默认情况下使用黑色填充当前或给定的路径，除非提供了 fillStyle 属性。
11	isPointInPath() 要检查点是否在路径内部或路径上，我们使用此方法。它以点作为参数并返回布尔值。
12	isPointInStroke() Canvas 2D API 的此方法验证给定点是否在描边的路径内，并返回布尔值（true 或 false）。
13	moveTo() 上下文对象通过参数将子路径移动到给定的坐标。
14	Path2D() 此构造函数方法创建一个 Path2D 对象，从中可以调用所有形状并将其绘制到 Canvas 元素上。
15	quadraticCurveTo() 此方法使用路径上下文绘制二次贝塞尔曲线。
16	scrollPathIntoView() Canvas 2D API 的此方法在被调用时，会将作为参数传递的可用路径滚动到视图中。
17	stroke() Canvas API 的此方法为 Canvas 元素内绘制的当前路径或形状添加描边。

打印页面

广告