HTML:

<h2>jCanvas example: Drawing text</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.drawText({ text: 'jCanvas is fun', fontFamily: 'cursive', fontSize: 40, x: 290, y: 150, fillStyle: 'lightblue', strokeStyle: 'blue', strokeWidth: 1 });

Result:

jCanvas example: Drawing text

绘制图片

你可以使用 drawImage()方法 来导入和处理图片。下面是一个例子：

$myCanvas.drawImage({ source: 'imgs/cat.jpg', x: 250, y: 100, fromCenter: false, shadowColor: '#222', shadowBlur: 3, rotate: 40 });

这是上面代码的呈现方式：

HTML:

<h2>jCanvas example: Importing and manipulating an image</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.drawImage({ source: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/cat.jpg', x: 250, y: 100, fromCenter: false, shadowColor: '#222', shadowBlur: 3, rotate: 40 });

Result:

jCanvas example: Importing and manipulating an image

你可以随便的改变上面示例的代码，戳这里： CodePen demo

Canvas层

如果你曾经使用过，如Photoshop或Gimp图像编辑器类的应用程序，你可能会对图层有所了解，使用图层最爽的地方在于，你可以在画布上控制每个图像。

jCanvas提供了一个功能强大的 API ，基于你的画布增加了灵活性。

这里介绍了如何使用jCanvas的层。

添加图层

你只能在每一个层上绘制一个对象。在你的jCanvas项目中你有两种添加图层的方式：

使用 addLayer()方法，其次是drawLayers()方法

在任何的绘制方法里设置layer属性的值为true

下面是如何运用第一种技术来绘制一个蓝色矩形：

$myCanvas.addLayer({ type: 'rectangle', fillStyle: 'steelblue', fromCenter: false, name: 'blueRectangle', x: 50, y: 50, width: 400, height: 200 }).drawLayers();

HTML:

<h2>jCanvas example: Drawing a rectangle with addLayer()</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.addLayer({ type: 'rectangle', fillStyle: 'steelblue', fromCenter: false, name: 'blueRectangle', x: 50, y: 50, width: 400, height: 200 }).drawLayers();

Result:

这里是你如何得到同样矩形的第二种方法：

$myCanvas.drawRect({ fillStyle: 'steelblue', layer: true, name: 'blueRectangle', fromCenter: false, x: 50, y: 50, width: 400, height: 200 });

HTML:

<h2>jCanvas example: Using drawing method with layer set to "true"</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.drawRect({ fillStyle: 'steelblue', layer: true, name: 'blueRectangle', fromCenter: false, x: 50, y: 50, width: 400, height: 200 });

Result:

正如你所看到的，上面的两种方法，我们得到了相同的结果。

最重要的一点是在上面两个代码样本中可以发现，上面的层你通过name设置的一个名称。这使得他易于参照本层的代码做出各种炫酷的东西，像改变其索引值，动画，删除等等。

让我们看看如何能够做到这一点。

动画层

你可以使用jCanvas的 animateLayer()方法 ，快速的在你的基础图层上添加动画，此方法接受以下参数：

让我们来看一下animateLayer() 方法的效果，我们将在一个层上绘制一个半透明的橙色圆圈，然后设置动画的位置，颜色以及透明度属性：

// Draw circle $myCanvas.drawArc({ name: 'orangeCircle', layer: true, x: 50, y: 50, radius: 100, fillStyle: 'orange', opacity: 0.5 }); // Animate the circle layer $myCanvas.animateLayer('orangeCircle', { x: 150, y: 150, radius: 50, }, 1000, function(layer) { // Callback function $(this).animateLayer(layer, { fillStyle: 'darkred', x: 250, y: 100, opacity: 1 }, 'slow', 'ease-in-out'); });

看一下下面例子中的动画：