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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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);
    }
  }