HTML:

<h2>jCanvas example: Smiling Face</h2> <canvas> <p>This is fallback content for users of assistive technologies or of browsers that don't have full support for the Canvas API.</p> </canvas>

CSS:

body { text-align: center; } canvas { margin: auto; display: block; }

JS:

// Store the canvas object into a variable var $myCanvas = $('#myCanvas'); $myCanvas.drawArc({ // draw the face fillStyle: 'yellow', strokeStyle: '#333', strokeWidth: 4, x: 300, y: 100, radius: 80 }).drawArc({ // draw the left eye fillStyle: '#333', strokeStyle: '#333', x: 250, y: 70, radius: 5 }).drawArc({ // draw the right eye fillStyle: '#333', strokeStyle: '#333', x: 350, y: 70, radius: 5 }).drawArc({ // draw the nose strokeStyle: '#333', strokeWidth: 4, ccw: true, x: 300, y: 100, radius: 30, start: 0, end: 200 }).drawArc({ // draw the smile strokeStyle: '#333', strokeWidth: 4, x: 300, y: 135, radius: 30, start: 90, end: 280 });

Result:

jCanvas example: Smiling Face

绘制线条和路径

你可以用 drawLine()方法 快速的绘制直线，或者定义一系列的线条的连接点。

$myCanvas.drawLine({ strokeStyle: 'steelblue', strokeWidth: 10, rounded: true, closed: true, x1: 100, y1: 28, x2: 50, y2: 200, x3: 300, y3: 200, x4: 200, y4: 109 });

上面代码设置了 rounded和closed属性的值为true，从而所绘制的线和角都是闭合的。

HTML:

<h2>jCanvas example: Connected lines</h2> <canvas> <p>This is fallback content for users of assistive technologies or of browsers that don't have full support for the Canvas API.</p> </canvas>

CSS:

body { text-align: center; } canvas { margin: auto; display: block; }

JS:

// Store the canvas object into a variable var $myCanvas = $('#myCanvas'); $myCanvas.drawLine({ strokeStyle: 'steelblue', strokeWidth: 10, rounded: true, closed: true, x1: 100, y1: 28, x2: 50, y2: 200, x3: 300, y3: 200, x4: 200, y4: 109 });

Result:

jCanvas example: Connected lines

还可以使用 drawPath()方法 绘制路径。

该drawPath()方法设置 x 和 y值，你还需要制定你要绘制的路径的类型，例如直线，圆弧等。

下面教你如何使用 drawPath()方法和 drawarrows()方法 画出一对水平和垂直方向的箭头，后者是一个非常好用的jCanvas方法，能够使你快速的在画布上绘制一个箭头形状：

$myCanvas.drawPath({ strokeStyle: '#000', strokeWidth: 4, x: 10, y: 10, p1: { type: 'line', x1: 100, y1: 100, x2: 200, y2: 100 }, p2: { type: 'line', rounded: true, endArrow: true, arrowRadius: 25, arrowAngle: 90, x1: 200, y1: 100, x2: 290, y2: 100 }, p3: { type: 'line', rounded: true, endArrow: true, arrowRadius: 25, arrowAngle: 90, x1: 100, y1: 100, x2: 100, y2: 250 } });

结果展示：

HTML：

<h2>jCanvas example: Connected Arrows</h2> <canvas> <p>This is fallback content for users of assistive technologies or of browsers that don't have full support for the Canvas API.</p> </canvas>

CSS：

body { text-align: center; } canvas { margin: auto; display: block; }

JS:

// Store the canvas object into a variable var $myCanvas = $('#myCanvas'); $myCanvas.drawPath({ strokeStyle: '#000', strokeWidth: 4, x: 10, y: 10, p1: { type: 'line', x1: 100, y1: 100, x2: 200, y2: 100 }, p2: { type: 'line', rounded: true, endArrow: true, arrowRadius: 25, arrowAngle: 90, x1: 200, y1: 100, x2: 290, y2: 100 }, p3: { type: 'line', rounded: true, endArrow: true, arrowRadius: 25, arrowAngle: 90, x1: 100, y1: 100, x2: 100, y2: 250 } });

Result:

jCanvas example: Connected Arrows

绘制文本

你可以使用 drawText()方法 快速的绘制出你需要的文字，这个方法的主要的功能：

这里的示例代码：

$myCanvas.drawText({ text: 'Canvas is fun', fontFamily: 'cursive', fontSize: 40, x: 290, y: 150, fillStyle: 'lightblue', strokeStyle: 'blue', strokeWidth: 1 });

在浏览器中将是这样的效果：