Path2D
Path2D allows you to describe a path through an existing path. This path can be drawn through the stroke API of Canvas.
addPath
addPath(path: Object): void
Adds a path to this path.
- Parameters
Name | Type | Description |
---|---|---|
path | Object | Path to be added to this path. |
-
Example
<!-- xxx.hml --> <div> <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas> </div>
//xxx.js export default { onShow() { const el =this.$refs.canvas; const ctx = el.getContext('2d'); var path1 = ctx.createPath2D("M250 150 L150 350 L350 350 Z"); var path2 = ctx.createPath2D(); path2.addPath(path1); ctx.stroke(path2); } }
setTransform
setTransform(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number): void
Sets the path transformation matrix.
- Parameters
Name | Type | Description |
---|---|---|
scaleX | number | Scale ratio of the x-axis |
skewX | number | Skew angle of the x-axis |
skewY | number | Skew angle of the y-axis |
scaleY | number | Scale ratio of the y-axis |
translateX | number | Translation distance of the x-axis |
translateY | number | Translation distance of the y-axis |
-
Example
<!-- xxx.hml --> <div> <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> </div>
//xxx.js export default { onShow() { const el =this.$refs.canvas; const ctx = el.getContext('2d'); var path = ctx.createPath2D("M250 150 L150 350 L350 350 Z"); path.setTransform(0.8, 0, 0, 0.4, 0, 0); ctx.stroke(path); } }
closePath
closePath(): void
Moves the current point of the path back to the start point of the path, and draws a straight line between the current point and the start point. If the shape is closed or has only one point, this method does not perform any action.
-
Example
<!-- xxx.hml --> <div> <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> </div>
//xxx.js export default { onShow() { const el =this.$refs.canvas; const ctx = el.getContext('2d'); var path = ctx.createPath2D(); path.moveTo(200, 100); path.lineTo(300, 100); path.lineTo(200, 200); path.closePath(); ctx.stroke(path); } }
moveTo
moveTo(x: number, y: number): void
Moves the current coordinate point of the path to the target point, without drawing a line during the movement.
- Parameters
Parameter | Type | Description |
---|---|---|
x | number | X-coordinate of the target point |
y | number | Y-coordinate of the target point |
-
Example
<!-- xxx.hml --> <div> <canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas> </div>
//xxx.js export default { onShow() { const el =this.$refs.canvas; const ctx = el.getContext('2d'); var path = ctx.createPath2D(); path.moveTo(50, 100); path.lineTo(250, 100); path.lineTo(150, 200); path.closePath(); ctx.stroke(path); } }
lineTo
lineTo(x: number, y: number): void
Draws a straight line from the current point to the target point.
- Parameters
Parameter | Type | Description |
---|---|---|
x | number | X-coordinate of the target point |
y | number | Y-coordinate of the target point |
-
Example
<!-- xxx.hml --> <div> <canvas ref="canvas" style="width: 400px; height: 450px; background-color: #ffff00;"></canvas> </div>
//xxx.js export default { onShow() { const el =this.$refs.canvas; const ctx = el.getContext('2d'); var path = ctx.createPath2D(); path.moveTo(100, 100); path.lineTo(100, 200); path.lineTo(200, 200); path.lineTo(200, 100); path.closePath(); ctx.stroke(path); } }
bezierCurveTo
bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void
Draws a cubic bezier curve on the canvas.
- Parameters
Parameter | Type | Description |
---|---|---|
cp1x | number | X-coordinate of the first parameter of the bezier curve |
cp1y | number | Y-coordinate of the first parameter of the bezier curve |
cp2x | number | X-coordinate of the second parameter of the bezier curve |
cp2y | number | Y-coordinate of the second parameter of the bezier curve |
x | number | X-coordinate of the end point on the bezier curve |
y | number | Y-coordinate of the end point on the bezier curve |
-
Example
<!-- xxx.hml --> <div> <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> </div>
//xxx.js export default { onShow() { const el =this.$refs.canvas; const ctx = el.getContext('2d'); var path = ctx.createPath2D(); path.moveTo(10, 10); path.bezierCurveTo(20, 100, 200, 100, 200, 20); ctx.stroke(path); } }
quadraticCurveTo
quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
Draws a quadratic curve on the canvas.
- Parameters
Parameter | Type | Description |
---|---|---|
cpx | number | X-coordinate of the bezier curve parameter |
cpy | number | Y-coordinate of the bezier curve parameter |
x | number | X-coordinate of the end point on the bezier curve |
y | number | Y-coordinate of the end point on the bezier curve |
-
Example
<!-- xxx.hml --> <div> <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> </div>
//xxx.js export default { onShow() { const el =this.$refs.canvas; const ctx = el.getContext('2d'); var path = ctx.createPath2D(); path.moveTo(10, 10); path.quadraticCurveTo(100, 100, 200, 20); ctx.stroke(path); } }
arc
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise: number): void
Draws an arc on the canvas.
- Parameters
Parameter | Type | Description |
---|---|---|
x | number | X-coordinate of the center point of the arc |
y | number | Y-coordinate of the center point of the arc |
radius | number | Radius of the arc |
startAngle | number | Start radian of the arc |
endAngle | number | End radian of the arc |
anticlockwise | boolean | Whether to draw the arc counterclockwise |
-
Example
<!-- xxx.hml --> <div> <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> </div>
//xxx.js export default { onShow() { const el =this.$refs.canvas; const ctx = el.getContext('2d'); var path = ctx.createPath2D(); path.arc(100, 75, 50, 0, 6.28); ctx.stroke(path); } }
arcTo
arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
Draws an arc based on the radius and points on the arc.
- Parameters
Parameter | Type | Description |
---|---|---|
x1 | number | X-coordinate of the first point on the arc |
y1 | number | Y-coordinate of the first point on the arc |
x2 | number | X-coordinate of the second point on the arc |
y2 | number | Y-coordinate of the second point on the arc |
radius | number | Radius of the arc |
-
Example
<!-- xxx.hml --> <div> <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> </div>
//xxx.js export default { onShow() { const el =this.$refs.canvas; const ctx = el.getContext('2d'); var path = ctx.createPath2D(); path.arcTo(150, 20, 150, 70, 50); ctx.stroke(path); } }
ellipse
ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: number): void
Draws an ellipse in the specified rectangular region.
- Parameters
Parameter | Type | Description |
---|---|---|
x | number | X-coordinate of the ellipse center |
y | number | Y-coordinate of the ellipse center |
radiusX | number | Ellipse radius on the x-axis. |
radiusY | number | Ellipse radius on the y-axis. |
rotation | number | Rotation angle of the ellipse. The unit is radian. |
startAngle | number | Angle of the start point for drawing the ellipse. The unit is radian. |
endAngle | number | Angle of the end point for drawing the ellipse. The angle is represented by radians. |
anticlockwise | number | Whether to draw the ellipse in the anticlockwise direction. The value 0 indicates clockwise and the value 1 indicates anticlockwise. This parameter is optional. The default value is 0. |
-
Example
<!-- xxx.hml --> <div> <canvas ref="canvas" style="width: 500px; height: 450px; background-color: #ffff00;"></canvas> </div>
//xxx.js export default { onShow() { const el =this.$refs.canvas; const ctx =el.getContext('2d'); var path = ctx.createPath2D(); path.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1); ctx.stroke(path); } }
rect
rect(x: number, y: number, width: number, height: number): void
Creates a rectangle.
- Parameters
Parameter | Type | Description |
---|---|---|
x | number | X-coordinate of the upper left corner of the rectangle. |
y | number | Y-coordinate of the upper left corner of the rectangle. |
width | number | Width of the rectangle. |
height | number | Height of the rectangle. |
-
Example
<!-- xxx.hml --> <div> <canvas ref="canvas" style="width: 500px; height: 450px; background-color: #ffff00;"></canvas> </div>
//xxx.js export default { onShow() { const el =this.$refs.canvas; const ctx = el.getContext('2d'); var path = ctx.createPath2D(); path.rect(20, 20, 100, 100); ctx.stroke(path); } }