Drawing Arcs 绘制圆弧 - caleb531/jcanvas-docs GitHub Wiki

Arcs 圆弧

An arc in jCanvas is, essentially, part of the rim of a circle (similar to the smile on a smiley-face).
jCanvas中的圆弧,本质上是圆圈的一部分(就像笑脸上的笑容一样)。

Basic Usage 基本用法

You can draw an arc using the drawArc() method. The size of an arc is determined by its start, end, and radius properties.
你可以用drawArc()方法来画一个圆弧,圆弧的大小取决于它的startendradius属性。
jCanvas considers zero degrees to lie due north of the arc (like the 12 on an analog clock).
jCanvas把0度认为位于圆弧的正北方(像针式钟表的12点方向)

// Draw a 90° arc 画一个90度圆弧
$('canvas').drawArc({
  strokeStyle: '#000',
  strokeWidth: 5,
  x: 100, y: 100,
  radius: 50,
  // start and end angles in degrees 以角度值计算的起始及终止角
  start: 0, end: 90
});

If you omit the start and end properties, the arc defaults to a full circle.
如果你省略了startend属性的话,圆弧默认为一个完整的圆。

// Draw a full circle  画一个完整的圆
$('canvas').drawArc({
  strokeStyle: '#000',
  strokeWidth: 5,
  x: 100, y: 100,
  radius: 50
});

Radian values 弧度值

The start and end values are measured in degrees by default. If you'd prefer to use radians, include the inDegrees property with a value of false.
startend的值默认是以角度值衡量的,如果你喜欢使用弧度值,就再写进inDegrees属性,设置其值为false

// Draw a black semicircle 画一个黑色的半圆
$('canvas').drawArc({
  fillStyle: 'black',
  x: 100, y: 100,
  radius: 50,
  start: 0, end: Math.PI,
  ccw: true,
  inDegrees: false
});

Closed Arc 闭合的圆弧

Using the closed property, you can also close an arc, which connects the start and end points.
使用closed属性,你可以闭合一个圆弧,会将起始点和终止点连接起来

// Draw a closed red arc 画一个闭合圆弧
$('canvas').drawArc({
  strokeStyle: '#c33',
  strokeWidth: 5,
  x: 100, y: 100,
  radius: 50,
  start: 45, end: 225,
  closed: true
});