绘制

圆弧

在jCanvas中,一个圆弧是一个圆形的边缘的至关重要的一部分(类似于笑脸上的微笑)。

基本用法

你可以使用drawArc()方法绘制一个圆弧。一个圆弧的大小由它的属性startendradius定义。

jCanvas把圆弧的0度指为正北方向(就像时钟上的12点钟方向)。

// 绘制一个90度的圆弧
$('canvas').drawArc({
  strokeStyle: '#000',
  strokeWidth: 5,
  x: 100, y: 100,
  radius: 50,
  // 开始并结束角,以角度数计
  start: 0, end: 90
});

如果你省略了属性startend,这个圆弧默认会是一个完整的圆。

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

半径值

startend值默认会以角度测量。如果你更喜欢用弧度,请包含属性inDegress并指明值为false

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

闭合弧

使用属性closed,你还可以闭合一个圆弧,它连接了开始点和结束点。

// 绘制一个闭合的红色圆弧
$('canvas').drawArc({
  strokeStyle: '#c33',
  strokeWidth: 5,
  x: 100, y: 100,
  radius: 50,
  start: 45, end: 225,
  closed: true
});

箭头

你可以用画直线和画曲线同样的方式画箭头,除了你必须提供一些箭头专有的属性。

基本用法

有一些基本属性,你可以用来向已有的路径添加箭头。

  • startArrow:一个布尔值,表示是否有一个箭头画在路径的开始点。
  • endArrow:一个布尔值,表示是否有一个箭头画在路径的结束点。
  • arrowAngle:是箭头两个尖端的夹角(可选参数;默认值是90
  • arrowRadius:一个数字,表示箭头的每个尖端的长度(必要参数)。

注意,你并非一定得既指定属性startArrow又指定属性endArrow。然而,你必须指定前者或后者,而且可以同时指定两者。

直线

$('canvas').drawLine({
  strokeStyle: '#000',
  strokeWidth: 4,
  rounded: true,
  startArrow: true,
  arrowRadius: 15,
  arrowAngle: 90,
  x1: 100, y1: 100,
  x2: 150, y2: 125,
  x3: 200, y3: 75
});

矢量

$('canvas').drawVector({
  strokeStyle: '#000',
  strokeWidth: 4,
  rounded: true,
  endArrow: true,
  arrowRadius: 15,
  arrowAngle: 90,
  x: 50, y: 50,
  a1: 180, l1: 100,
  a2: 90, l2: 100
});

二次曲线

$('canvas').drawQuadratic({
  strokeStyle: '#000',
  strokeWidth: 4,
  rounded: true,
  endArrow: true,
  arrowRadius: 15,
  arrowAngle: 60,
  x1: 50, y1: 50,
  cx1: 200, cy1: 50,
  x2: 250, y2: 200
})

贝赛尔曲线

$('canvas').drawBezier({
  strokeStyle: '#000',
  strokeWidth: 4,
  rounded: true,
  startArrow: true,
  endArrow: true,
  arrowRadius: 15,
  arrowAngle: 90,
  x1: 100, y1: 100,
  cx1: 150, cy1: 100,
  cx2: 100, cy2: 200,
  x2: 150, y2: 200,
  cx3: 250, cy3: 200,
  cx4: 100, cy4: 50,
  x3: 250, y3: 100
})

圆弧

$('canvas').drawArc({
  strokeStyle: '#000',
  strokeWidth: 4,
  rounded: true,
  endArrow: true,
  arrowRadius: 15,
  arrowAngle: 90,
  x: 160, y: 120,
  start: 90,
  end: 360,
  radius: 50
});

路径

$('canvas').drawPath({
  strokeStyle: '#000',
  strokeWidth: 5,
  p1: {
    type: 'line',
    x1: 160, y1: 200,
    x2: 160, y2: 50,
    endArrow: true,
    arrowRadius: 30,
    arrowAngle: 90
  },
  p2: {
    type: 'quadratic',
    x1: 160, y1: 50,
    cx1: 160, cy1: 150,
    x2: 100, y2: 200
  }
});

曲线

二次曲线

一个二次曲线由三个成分构成:

  • 一个开始点(xy)
  • 一个用来制作曲线的控制点(cxcy)
  • 一个结束点,它会成为下一个开始点(xy)

Y你可以使用drawQuadratic()方法绘制一个或更多的连续的二次曲线。

$('canvas').drawQuadratic({
  strokeStyle: '#000',
  strokeWidth: 5,
  x1: 50, y1: 50, // 开始点
  cx1: 200, cy1: 50, // 控制点
  x2: 200, y2: 200 // 结束点
});

贝赛尔曲线

一条贝赛尔曲线由四个成分构成:

  • 一个开始点(xy)
  • 第一个控制点(cxcy)
  • 第二个控制点(cxcy)
  • 一个结束点,成为下一个开始点(xy)

你可以使用drawBezier()方法绘制一条或更多条连续的贝赛尔曲线。

$('canvas').drawBezier({
  strokeStyle: '#000',
  strokeWidth: 5,
  x1: 25, y1: 50, // 开始点
  cx1: 175, cy1: 50, // 控制点
  cx2: 25, cy2: 150, // 控制点
  x2: 175, y2: 150, // 开始/结束点
  cx3: 275, cy3: 150, // 控制点
  cx4: 125, cy4: 1, // 控制点
  x3: 300, y3: 50 // 开始/结束点
});

椭圆

从本质上来说,jCanvas中的椭圆形是一个瘦长的圆形。一个椭圆形的大小由它的属性widthheight决定。

基本用法

你可以使用drawEllipse()方法绘制一个椭圆形。

$('canvas').drawEllipse({
  fillStyle: '#c33',
  x: 150, y: 100,
  width: 200, height: 100
});
$('canvas').drawEllipse({
  strokeStyle: '#36c',
  strokeWidth: 4,
  x: 150, y: 100,
  width: 200, height: 100
});

图像

$('canvas').drawImage({
  source: 'images/fish.jpg',
  x: 150, y: 150
});

自定义宽、高

$('canvas').drawImage({
  source: 'images/fish.jpg',
  x: 50, y: 50,
  width: 80,
  height: 100,
  fromCenter: false
});

如果你想要保持一个图像的宽高比,请使用属性scale,这个属性是一个倍数,以1为基线。

$('canvas').drawImage({
  source: 'images/fish.jpg',
  x: 150, y: 150,
  scale: 0.5
});

使用一个图像元素

你还可以使用一个图像DOM元素作为属性source的值。

$('canvas').drawImage({
  source: $('#fish')[0],
  x: 50, y: 50,
  width: 100,
  fromCenter: false
});

load事件

在jCanvas中,图像是异步绘制的,因为要等它载入后才能绘制。在一些情况下,这不是问题,因为图像载入速度足够快,然而,并非总会是这种情况。

要想解决这个问题,jCanvas允许你使用load事件,在图像载入之时运行一个回调函数。

// 绘制一个弧的函数
function arc() {
  $('canvas').drawArc({
    strokeStyle: '#6f9',
    strokeWidth: 4,
    x: 155, y: 155,
    radius: 40
  });
}

// 在图像载入之后运行arc()函数
$('canvas').drawImage({
  source: 'images/ladybug.jpg',
  x: 150, y: 150,
  load: arc
});

注意,load事件不仅会在图像被初始绘制的时候引发,而且还会在它被重绘的时候引发。因此,拖曳图像(举个例子)将导致连续地引发load事件(因为你正在拖曳它)。

裁剪

包括了属性sxsysWidthsHeight,允许你选择裁剪图像的哪个部分。

  • sWidth:定义要裁剪的区域的宽度
  • sHeight:定义要裁剪的区域的高度
  • sx:定义要裁剪的区域的x位置
  • sy:定义要裁剪的区域的y位置
$('canvas').drawImage({
  source: 'images/ladybug.jpg',
  x: 150, y: 150,
  sWidth: 50,
  sHeight: 50,
  sx: 116, sy: 75
});

默认情况下,属性sxsy定义了裁剪区域的中心(为了一致性)。要想改变这,请把属性cropFromCenter设置为false

$('canvas').drawImage({
  source: 'images/fish.jpg',
  x: 150, y: 150,
  sWidth: 100,
  sHeight: 50,
  sx: 100, sy: 70,
  cropFromCenter: false
});

现在,如你所愿,属性sxsy定义了裁剪区域的左上角。

图像和图层

从v13.04.05版开始,图像图层将总是先彻底载入,然后绘制图层。

$('canvas').drawImage({
  layer: true,
  source: 'images/big-fish.jpg',
  x: 150, y: 150,
  width: 200, height: 125
})
.drawArc({
  layer: true,
  fillStyle: '#69f',
  strokeStyle: '#000',
  strokeWidth: 2,
  x: 250, y: 100,
  radius: 50
})
// 重绘图层以确保正确的次序
.drawLayers();

注意

Internet Explorer 9具有一个缺陷,能阻止在画布上绘制图像,如果图像还没有载入的话。为了修复这,请使用一个已有的<img>DOM对象,作为属性source

直线

从本质上来说,在jCanvas中的一条直线路径,是一个或更多的连续的直线片段。

基本用法

你可以使用drawLine()方法绘制一条直线路径。使用属性x1y1x2y2……(数量根据需要而定)定义坐标。

$('canvas').drawLine({
  strokeStyle: '#000',
  strokeWidth: 10,
  x1: 100, y1: 50,
  x2: 100, y2: 150,
  x3: 200, y3: 100,
  x4: 150, y4: 200
});

闭合直线路径

视情况,你可以闭合一个直线路径,它会用一条额外的直线连接开始点和结束点。要想实现这,请使用属性closed

$('canvas').drawLine({
  strokeStyle: '#000',
  strokeWidth: 10,
  x1: 100, y1: 50,
  x2: 100, y2: 150,
  x3: 200, y3: 100,
  x4: 150, y4: 200,
  closed: true
});

圆角

你可以使用属性rounded绘制直线路径的圆角。

$('canvas').drawLine({
  strokeStyle: '#000',
  strokeWidth: 10,
  rounded: true,
  x1: 80, y1: 50,
  x2: 100, y2: 150,
  x3: 200, y3: 100,
  x4: 150, y4: 200
});

绘制点的数组

如果你想要利用一个数组包含你的点,你可以用一个循环清松构造这个drawLine()对象

// The .drawLine() object
var obj = {
  strokeStyle: '#000',
  strokeWidth: 6,
  rounded: true
};

// 你的点数组
var pts = [
  [80, 50],
  [100, 150],
  [200, 100],
  [150, 200]
];

// 从数据中把点添加到对象
for (var p=0; p < pts.length; p+=1) {
  obj['x'+(p+1)] = pts[p][0];
  obj['y'+(p+1)] = pts[p][1];
}

// Draw the line
$('canvas').drawLine(obj);

虚点线

浏览器已经开始采用这个能力来创建一条虚点线。要想在jCanvas中实现它,请指定属性strokeDash和属性strokeDashOffset

属性strokeDash接受一个数组,数组中有一个数字或两个数字,而属性strokeDashOffset接受一个数字。参见属性以了解特定用法的详情。

$('canvas').drawLine({
  strokeStyle: '#000',
  strokeWidth: 3,
  strokeDash: [5],
  strokeDashOffset: 0,
  x1: 100, y1: 50,
  x2: 100, y2: 150,
  x3: 200, y3: 100,
  x4: 150, y4: 200
});

矢量

取代drawLine()方法,你可能会使用[drawVector()](/jcanvas/docs/vectors/)方法标画线段(它使用矢量而不是使用(xy)坐标绘制直线)。

遮罩

基本遮罩

要想创建一个形状,遮罩其它形状,请把属性mask设置为true

// 这个形状是一个遮罩
$('canvas').drawArc({
  fillStyle: '#36b',
  x: 150, y: 150,
  radius: 50,
  mask: true
})
// 这是要遮罩的形状
.drawRect({
  fillStyle: '#6c1',
  x: 100, y: 120,
  width: 100, height: 100
})
// 恢复遮罩
.restoreCanvas();

要想恢复遮罩并防止遮罩将来的形状,请调用restoreCanvas()方法。

图层遮罩

你还可以使用属性mask创建一个遮罩其它图层的图层。一个遮罩图层一般被称为“图层遮罩”。

// 这个图层是一个遮罩
$('canvas').drawArc({
  layer: true,
  fillStyle: '#36b',
  x: 150, y: 150,
  radius: 50,
  mask: true
})
// 这个图层是被遮罩的
.drawRect({
  layer: true,
  fillStyle: '#6c1',
  x: 100, y: 120,
  width: 100, height: 100
})
// 恢复图层遮罩
.restoreCanvas({
  layer: true
});

然而,在创建遮罩层的时候,restoreCanvas()方法必须使它的属性layer是一个图层,如上面所示。对于更多信息,参见恢复画布部分。

遮罩可拖曳图层

在这个示例中,移动形状以看到图层遮罩如何影响别的形状的可拖曳性。

// 绘制蓝色方形
$('canvas').drawRect({
  layer: true,
  draggable: true,
  mask: true,
  name: 'blue',
  fillStyle: '#36c',
  x: 150, y: 150,
  width: 150, height: 150
})
// 绘制桔色矩形
.drawRect({
  layer: true,
  draggable: true,
  name: 'orange',
  fillStyle: '#f63',
  x: 80, y: 120,
  width: 80, height: 30
})
// 恢复蓝色遮罩
.restoreCanvas({
  layer: true
})
// 绘制绿色圆形
.drawArc({
  layer: true,
  mask: true,
  draggable: true,
  name: 'green',
  fillStyle: '#6c1',
  x: 200, y: 200,
  radius: 50
})
// 绘制红色矩形
.drawRect({
  layer: true,
  draggable: true,
  name: 'red',
  fillStyle: '#c33',
  x: 180, y: 180,
  width: 50, height: 30
})
// 恢复绿色遮罩
.restoreCanvas({
  layer: true
})

路径

在jCanvas中,一条路由由一个或更多相连的直线弧线曲线或者矢量构成。

基本用法

你可以使用drawPath()方法绘制一条路径。它接受各种各样的参数,定义路径内不同类型的子路径。使用p1p2p3……定义这些参数(数量根据需要而定)。

注意,对于这些子路径参数,你必须指定子路径的类型(举个例子,type: 'line')。

// 绘制一个卡通脸的轮廓
$('canvas').drawPath({
  strokeStyle: '#000',
  strokeWidth: 4,
  p1: {
    type: 'line',
    x1: 200, y1: 50,
    x2: 100, y2: 150,
    x3: 200, y3: 150,
    x4: 120, y4: 200
  },
  p2: {
    type: 'quadratic',
    cx1: 175, cy1: 250,
    x2: 225, y2: 200
  }
});

现在,如果你想要用drawQuadratic()方法绘制上面的二次曲线,你必须指定属性x1y1。然而,使用drawPath(),曲线会从上一个子路径的最后一点(p1)连续下来。

如果你已经包含了属性x1y1,曲线不再与上一个子路径相连。设想下成的示例。

// 绘制一个带有下巴分离的脸
$('canvas').drawPath({
  strokeStyle: '#000',
  strokeWidth: 4,
  p1: {
    type: 'line',
    x1: 200, y1: 50,
    x2: 100, y2: 150,
    x3: 200, y3: 150,
    x4: 120, y4: 200
  },
  p2: {
    type: 'quadratic',
    x1: 130, y1: 210,
    cx1: 180, cy1: 250,
    x2: 225, y2: 200
  }
});

圆弧

你可以使用drawPath()方法创建一系列互相连接的圆弧。

以下示例将使用圆弧创建一朵花的形状。

$('canvas')
.drawPath({
  strokeStyle: '#000',
  strokeWidth: 4,
  closed: true,
  x: 160, y: 150,
  // 顶部花瓣
  p1: {
    type: 'arc',
    x: 0, y: -50,
    start: -90, end: 90,
    radius: 50
  },
  // 右边花瓣
  p2: {
    type: 'arc',
    x: 50, y: 0,
    start: 0, end: 180,
    radius: 50
  },
  // 底部花瓣
  p3: {
    type: 'arc',
    x: 0, y: 50,
    start: 90, end: 270,
    radius: 50
  },
  // 左边花瓣
  p4: {
    type: 'arc',
    x: -50, y: 0,
    start: 180, end: 360,
    radius: 50
  }
});

注意,针对每个子路径的x坐标和y坐标是相对于整个路径的xy坐标的。

而且,子路径对象继承来自全局jCanvas参考的默认属性值(它通过jCanvas方法设置)。

箭头

就像jCanvas中的其它路径类型,一般的路径在路径的任一端都支持箭头。参见箭头相关章节以了解箭头属性。

对于一般路径,必须在一个子路径对象中指定箭头属性,而不是在整个路径对象中指定箭头属性。

// 绘制一个卡通点的轮廓
$('canvas').drawPath({
  strokeStyle: '#000',
  strokeWidth: 4,
  p1: {
    type: 'vector',
    startArrow: true,
    arrowAngle: 60,
    arrowRadius: 30,
    x: 200, y: 50,
    a1: 225, l1: 200,
  },
  p2: {
    type: 'quadratic',
    cx1: 150, cy1: 250,
    x2: 225, y2: 200,
    endArrow: true,
    arrowAngle: 60,
    arrowRadius: 30
  }
});

多边形

drawPolygon()方法创建了一个规则的多边形(等角多边形)。

// Draw a triangle
$('canvas').drawPolygon({
  strokeStyle: 'black',
  strokeWidth: 4,
  x: 200, y: 100,
  radius: 50,
  sides: 3
});
// 绘制一个多边形
$('canvas').drawPolygon({
  fillStyle: '#589',
  strokeStyle: '#000',
  x: 100, y: 100,
  radius: 50,
  sides: 5,
  rotate: 25
});

凹多边形

要想创建一个凹多边形(有一点内陷的多边形),必须包含属性concavity

  • 一个大于0的值将导致边向点内凹。
  • 一个小于0的值将导致边向点外凸。
  • 一个等于0的值没有投射。
  • 一个等于1的值将使多边形不可见,因为边将完全聚到一点上了。
// 绘制一颗星
$('canvas').drawPolygon({
  fillStyle: '#36c',
  x: 100, y: 100,
  radius: 50,
  sides: 5,
  concavity: 0.5
});
// 绘制一个像徽章的形状
$('canvas').drawPolygon({
  fillStyle: '#3c6',
  strokeStyle: '#083',
  x: 100, y: 100,
  radius: 50,
  sides: 50,
  concavity: 0.1
});
// 绘制一个像盾的形状
$('canvas').drawPolygon({
  fillStyle: '#36c',
  strokeStyle: '#f60',
  strokeWidth: 5,
  x: 100, y: 100,
  radius: 50,
  sides: 3,
  concavity: -0.5,
  rotate: 180
});

矩形

从本质上来说,在jCanvas中,一个矩形是任何宽度或高度的矩形。

基本用法

你可以使用drawRect()方法绘制一个矩形。矩形的大小由属性widthheight决定。

$('canvas').drawRect({
  fillStyle: '#000',
  x: 150, y: 100,
  width: 200,
  height: 100
});

定位

属性fromCenter(上面所用到的)决定了一个矩形的属性xy是否

举个例子,考虑以下的矩形。它们有本民的属性x值和属性y值,但是只有一个具有属性fromCenter且设置为false

$('canvas').drawRect({
  fillStyle: '#c33',
  x: 100, y: 60,
  width: 100,
  height: 80
});
$('canvas').drawRect({
  fillStyle: '#6a6',
  x: 100, y: 60,
  width: 100,
  height: 80,
  fromCenter: false
});

如果你想让所有的形状都默认fromCenter: false,只需要对$.jCanvas.default对象这么做。

$.jCanvas.defaults.fromCenter = false;
$('canvas').drawRect({
  fillStyle: '#6a6',
  x: 100, y: 60,
  width: 100,
  height: 80,
  fromCenter: false
});

圆角

你可以使用属性cornerRadius圆化矩形的角。

$('canvas').drawRect({
  fillStyle: '#36c',
  x: 150, y: 100,
  width: 200,
  height: 100,
  cornerRadius: 10
});
$('canvas').drawRect({
  strokeStyle: '#c33',
  strokeWidth: 4,
  x: 150, y: 100,
  width: 200,
  height: 100,
  cornerRadius: 10
});

切片

从本质上来说,在jCanvas中的切片是一小块圆形(类似于比萨饼切片)

基本用法

你还可以使用drawSlice()方法绘制一个切片。切片的大小由它的属性startendradius决定。

切片的位置由它的属性xy决定。这些坐标位于切片的尖端。

// 绘制一个60度切片
$('canvas').drawSlice({
  fillStyle: '#f63',
  x: 100, y: 100,
  radius: 150,
  // 以角度数开始并结束角
  start: 60, end: 120
});

创建一个饼图

你还可以在jCanvas中使用drawSlice方法创建一个简单的饼图标。

在下面的示例中,属性spread决定了切片之间的间距。属性的值

$('canvas')
.drawSlice({
  layer: true,
  name: 'red-slice',
  groups: ['chart', 'slices'],
  fillStyle: '#c33',
  x: 180, y: 110,
  start: -45, end: 15,
  radius: 100,
  spread: 1 / 40
})
.drawSlice({
  layer: true,
  name: 'green-slice',
  groups: ['chart', 'slices'],
  fillStyle: '#6c0',
  x: 180, y: 110,
  start: -135, end: -45,
  radius: 100,
  spread: 1 / 40
})
.drawSlice({
  layer: true,
  name: 'blue-slice',
  groups: ['chart', 'slices'],
  fillStyle: '#36c',
  x: 180, y: 110,
  start: 15, end: -135,
  radius: 100,
  spread: 1 / 40
});

要想把文本标签添加到你的饼图上,只要用drawText()方法创建一个文本图层。

$('canvas')
.drawSlice({
  layer: true,
  name: 'red-slice',
  groups: ['chart', 'slices'],
  fillStyle: '#c33',
  x: 180, y: 110,
  start: -45, end: 15,
  radius: 100,
  spread: 1 / 40
})
.drawSlice({
  layer: true,
  name: 'green-slice',
  groups: ['chart', 'slices'],
  fillStyle: '#6c0',
  x: 180, y: 110,
  start: -135, end: -45,
  radius: 100,
  spread: 1 / 40
})
.drawSlice({
  layer: true,
  name: 'blue-slice',
  groups: ['chart', 'slices'],
  fillStyle: '#36c',
  x: 180, y: 110,
  start: 15, end: -135,
  radius: 100,
  spread: 1 / 40
})
.drawText({
  layer: true,
  name: 'red-label',
  groups: ['chart', 'labels'],
  fillStyle: '#fff',
  x: 160, y: 50,
  fontFamily: 'sans-serif',
  fontSize: 20,
  text: '17%'
})
.drawText({
  layer: true,
  name: 'green-label',
  groups: ['chart', 'labels'],
  fillStyle: '#fff',
  x: 120, y: 115,
  fontFamily: 'sans-serif',
  fontSize: 20,
  text: '25%'
})
.drawText({
  layer: true,
  name: 'blue-label',
  groups: ['chart', 'labels'],
  fillStyle: '#fff',
  x: 220, y: 150,
  fontFamily: 'sans-serif',
  fontSize: 20,
  text: '58%'
})

文本

要想在画布上绘制文本,请使用drawText()方法。

在画布上的输出文本由属性text的值,以及下面的字体属性决定:

  • fontStyle
  • fontSize
  • fontFamily
$('canvas').drawText({
  fillStyle: '#9cf',
  strokeStyle: '#25a',
  strokeWidth: 2,
  x: 150, y: 100,
  fontSize: 48,
  fontFamily: 'Verdana, sans-serif',
  text: 'Hello'
});

字体大小

针对属性fontSize的值接受两个不同类型的值。如果你把值指定为纯数字(例如,48),字体大小会被翻译成像素。

然而,你可以把这个数字指定成字符串,带上额外的单位附加(例如,'36pt')。这两种用法在本章节中都能找到。

变换文本

就像其它形状,drawText()方法顾及属性fromCenter的值,以及变换属性,比如说rotate的值。

$('canvas').drawText({
  fillStyle: '#cfc',
  strokeStyle: '#000',
  strokeWidth: 2,
  x: 150, y: 100,
  fontSize: '50pt',
  fontFamily: 'Arial',
  text: 'Hello',
  // 从文本的左上角测度(x, y)
  fromCenter: false,
  // 把文本旋转30度
  rotate: 30
});

缩放文本

你可以使用属性scalescaleXscaleY来变动文本的字体大小。

$('canvas').drawText({
  layer: true,
  fillStyle: '#9cf',
  strokeStyle: '#25a',
  strokeWidth: 2,
  x: 200, y: 100,
  fontSize: '36pt',
  fontFamily: 'Verdana, sans-serif',
  text: 'Hello',
  scale: 2,
  click: function() {
    // Click the text to make it grow
    $(this).animateLayer(0, {
      scale: '+=0.25',
    }, 250);
  }
});

测量文本

measureText()方法返回一个对象,它包含了文本的计算widthheight(以及它的其它属性)。

该方法接受一个图层标识符(也可以是图层的索引,或者它的名称)。该方法还接受一个属性的对象(和你在调用drawText()方法时所用的属性相同)作为唯一的参数。

在下面的示例中,圆形宽度和它内部的文本一样宽。

// 绘制文本
$('canvas').drawText({
  layer: true,
  name: 'myText',
  fillStyle: '#36c',
  strokeWidth: 2,
  x: 180, y: 150,
  fontSize: '36pt',
  fontFamily: 'Verdana, sans-serif',
  text: 'Hello'
})
// 绘制一个圆,和文本一样宽
.drawArc({
  layer: true,
  strokeStyle: '#000',
  strokeWidth: 4,
  x: 180, y: 150,
  radius: $('canvas').measureText('myText').width / 2
});

包裹文本

你还可以使用属性maxWidth为文本定义一个最大行宽。如果这样做的话,每行文本将不会比最大行宽更长(这就是所谓的文本“包裹”)。

人为添加一个断行,也可以实现这,只要在你的字符串中添加标准的新行字符(\n)。

$('canvas').drawText({
  fillStyle: '#36c',
  fontStyle: 'bold',
  fontSize: '20pt',
  fontFamily: 'Trebuchet MS, sans-serif',
  text: 'The quick brown fox jumps over the lazy dog.',
  x: 180, y: 100,
  maxWidth: 300
});

对齐文本

如果你希望把你的文本对齐到leftright(而不是默认的居中对齐),请使用属性align

$('canvas').drawText({
  fillStyle: '#36c',
  fontStyle: 'bold',
  fontSize: '20pt',
  fontFamily: 'Trebuchet MS, sans-serif',
  text: 'The quick brown fox jumps over the lazy dog.',
  x: 180, y: 100,
  align: 'left',
  maxWidth: 300
});

把文本对齐到边界

利用上面的属性align,默认情况下,文本将会向左对齐或向右对齐,但是依然相对于它的xy坐标居中。

respectAlign属性将确保文本左边距或右边距的(x, y)坐标在行内(取决于属性align的值)。因此,启用这些属性将要求你根据它调整你的x位置。

$('canvas').drawText({
  fillStyle: '#36c',
  fontStyle: 'bold',
  fontSize: '20pt',
  fontFamily: 'Trebuchet MS, sans-serif',
  text: 'The quick brown fox jumps over the lazy dog.',
  x: 80, y: 100,
  align: 'left',
  respectAlign: true,
  maxWidth: 300
});

改变行高

属性lineHeight会改变文本的行高。这个属性的值是一个默认行高的倍数(默认行高算作1)。

举个例子,下面的演示文档将把它绘制的文本的行高加一倍。

$('canvas').drawText({
  fillStyle: '#36c',
  fontStyle: 'bold',
  fontSize: '20pt',
  fontFamily: 'Trebuchet MS, sans-serif',
  text: 'The quick brown fox jumps over the lazy dog.',
  x: 180, y: 100,
  align: 'left',
  maxWidth: 300,
  lineHeight: 2
});

一个带有负值的行高将交换文本的行(例如,上一行变成下一行)。

$('canvas').drawText({
  fillStyle: '#36c',
  fontStyle: 'bold',
  fontSize: '20pt',
  fontFamily: 'Trebuchet MS, sans-serif',
  text: 'The quick brown fox jumps over the lazy dog.',
  x: 180, y: 100,
  align: 'left',
  maxWidth: 300,
  lineHeight: -2
});

注意,在检索文本的高度时(使用measureText()方法),一个负数行高将产生一个负数。

沿着一条弧的文本

jCanvas还可以绘制弧线文本(即,沿着弧线的文本)。只需要指定一个额外的属性:属性radius就可以做到它。

$('canvas').drawText({
  fillStyle: '#c33',
  fontFamily: 'Ubuntu, sans-serif',
  fontSize: 18,
  text: 'THIS IS THE FIRST LINE\nTHIS IS THE SECOND LINE\nTHIS IS THE THIRD LINE',
  x: 160, y: 200,
  radius: 150
});

只对于弧线文本,存在一个可选的属性letterSpacing,它控制了沿着弧线的两个字符之间的间距。

$('canvas').drawText({
  fillStyle: '#c33',
  fontFamily: 'Ubuntu, sans-serif',
  fontSize: 18,
  text: 'THIS IS THE FIRST LINE\nTHIS IS THE SECOND LINE\nTHIS IS THE THIRD LINE',
  x: 160, y: 200,
  radius: 150,
  letterSpacing: 0.02
});

从技术上来说,属性letterSpacing的值代表了pi的倍数,它代表了两个字母之间的角距离。举个例子,值0.05暗示了每两个字符之间相距9度(0.05π等于9°)

翻转圆弧文本

有时候,你可能希望把文本对齐到曲线上(就一个笑脸)。通常地,试图这样做会导致不想要的翻转文本。

$('canvas').drawText({
  fillStyle: '#c33',
  fontFamily: 'Ubuntu, sans-serif',
  fontSize: 18,
  text: 'THIS IS THE FIRST LINE\nTHIS IS THE SECOND LINE\nTHIS IS THE THIRD LINE',
  x: 160, y: 200,
  radius: 150,
  rotate: 180
});

然而,你可以把属性flipArcText设置成true,而且文本将再次翻转到可读。

$('canvas').drawText({
  fillStyle: '#c33',
  fontFamily: 'Ubuntu, sans-serif',
  fontSize: 18,
  text: 'THIS IS THE FIRST LINE\nTHIS IS THE SECOND LINE\nTHIS IS THE THIRD LINE',
  x: 160, y: 200,
  radius: 150,
  rotate: 180,
  flipArcText: true
});

矢量

为在画布上画线的小段,除了可以使用drawLine()方法之外,你还可以使用drawVector()方法,它的工作方式不同,但是制作出相同的结果(连续的线)。

使用drawVector()方法,每个线小段都用一个夹角和一个长度来创建。这些小段使用属性a1l1a2l2……诸此之类来创建。

// 绘制一条直线,它有100像素度,跟正北方向成45度角
$('canvas').drawVector({
  strokeStyle: '#000',
  strokeWidth: 4,
  a1: 135, l1: 100
});

定义开始点

另外,你可以使用属性xy为你的矢量指定一个开始点。

$('canvas').drawVector({
  strokeStyle: '#000',
  strokeWidth: 4,
  x: 50, y: 50,
  a1: 120, l1: 100
});

组合矢量

当然,你可能想创建多个适量。请记住,无论矢量定位在哪里,它的角总是相对于正北方(或者钟面上的12点钟方向)。

// Draw a bent path
$('canvas').drawVector({
  strokeStyle: '#000',
  strokeWidth: 4,
  x: 50, y: 150,
  a1: 45, l1: 100,
  a2: 135, l2: 220
});

使用线属性

因为drawVestor()方法创建了一个直线小段,就像drawLine()方法,所以drawVector()方法接受很多与drawLine()方法相同的属性。这些属性包括(但不限于)closedrounded

// 绘制一个闭合的路径(制作出一个三角形)
$('canvas').drawVector({
  strokeStyle: '#000',
  strokeWidth: 4,
  rounded: true,
  closed: true,
  x: 50, y: 150,
  a1: 45, l1: 100,
  a2: 135, l2: 220
});

这些属性的详细用法,可以在直线章节中找到

注意

角的大小默认用角度指定。然而,如果你喜欢用弧度指定角的大小,请把属性inDegrees设置为false

如果你喜欢这篇文章,敬请给站长打赏↑

除特别注明外,本站所有文章均为本站站长原译,转载请注明出处。