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()
方法来画一个圆弧,圆弧的大小取决于它的start
,end
和radius
属性。
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.
如果你省略了start
和end
属性的话,圆弧默认为一个完整的圆。
// 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
.
start
和end
的值默认是以角度值衡量的,如果你喜欢使用弧度值,就再写进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
});