HTML5 可以直接在你的网页中使用 <canvas> 及其相关的 JavaScript API 绘制的图形。
在这篇文章中，我将向你介绍 jCanvas ，一个基于 jQuery的免费且开源的 HTML5的Canvas API。
如果你使用 jQuery 进行开发，jCanvas能够使用 jQuery更简单，更快速的完成一些非常炫酷的 canvas画布及交互效果。
什么是 jCanvas ？jCanvas 官网是这样解释的：
“jCanvas is a JavaScript library, written using jQuery and for jQuery, that wraps around the HTML5 canvas API, adding new features and capabilities, many of which are customizable. Capabilities include layers, events, drag-and-drop, animation, and much more.
The result is a flexible API wrapped up in a sugary, jQuery-esque syntax that brings power and ease to the HTML5 canvas. ”
jCanvas 能让你做的一切事情，你都可以用原生的Canvas API来实现，甚至可以做更多的事情。如果你愿意的话，你也可以将原生的Canvas API方法和 jCanvas一起使用。 draw()方法 就可以这样使用。此外，你还可以非常轻松的用自己的方法结合 extend()函数 来扩展jCanvas的功能。
添加jCanvas 到你的项目中将jCanavs添加在你的项目中，从官方网站或 GitHub的页面 上 下载脚本 ，然后将脚本文件放在你的项目文件夹中。正如前面说的，jCanvas需要依赖 jQuery才能正常工作，所以还要确保引入了 jQuery文件。
项目的脚本文件将是这个样子：
<script src="http://www.tuicool.com/articles/js/jquery.min.js>最后，引入你自己的JavaScript 代码文件。现在，让我们开始jCanvas之旅吧。
设置 HTML文档我们通过为 HTMl5文档添加一个<canvas>标签，来开始我们的示例。
<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>以下是关于上面的代码片段的几点说明。
如果你想使用原生的Canvas API，你的 JavaScript 代码将会这样的：
var canvas = document.getElementById('myCanvas'), context = canvas.getContext('2d');上述代码中的context变量存储了Canvas对象的一个2D上下文属性。正是这种特性，使得你可以访问 HTML5的 Canvas API提供的所有其他属性和方法。
如果你想了解的更多，你可以戳这里 HTML5 Canvas 简介 。
jCanvas的方法和属性已经包含了2D上下文的引用，因此你可以直接的跳到绘制图片。
用jCanvas绘制一些图形大多数的 jCanvas方法，接受键值对的形式，因此你可以根据你的需要，或你喜欢的顺序去使用它们。
让我们从绘制一个矩形开始吧。
矩形下面是你怎样用 jCanvas对象的 drawRect() 方法 绘制出一个矩形的方法。
// Store the canvas object into a variable var $myCanvas = $('#myCanvas'); // rectangle shape $myCanvas.drawRect({ fillStyle: 'steelblue', strokeStyle: 'blue', strokeWidth: 4, x: 150, y: 100, fromCenter: false, width: 200, height: 100 });上面的代码片段表示，存储 Canvas对象到一个名为$myCanvas的变量中。里面的drawRect()方法的属性都是比较简单的，但是我们在这里简单的阐述一下：
下面是矩形的示例代码：
HTML：
<h2>jCanvas example: Rectangle</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'); // rectangle shape $myCanvas.drawRect({ fillStyle: 'steelblue', strokeStyle: 'blue', strokeWidth: 4, x: 190, y: 50, fromCenter: false, width: 200, height: 100 });Result:
jCanvas example: Rectangle
弧是一个圆的边缘部分。对于jCanvas来说，画一个圆弧仅仅是在 drawArc() 方法 里设置几个所需的属性：
$myCanvas.drawArc({ strokeStyle: 'steelblue', strokeStyle: 'blue', strokeWidth: 4, x: 300, y: 100, radius: 50, // start and end angles in degrees start: 0, end: 200 });绘制弧形，需要设置半径属性的值，以及开始的角度和结束的角度。如果你希望弧形是逆时针方向的话，需要添加一个ccw属性，并将其属性值设置为true。
下面是上述代码块演示：
HTML:
<h2>jCanvas example: Arc</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({ strokeStyle: 'steelblue', strokeStyle: 'blue', strokeWidth: 4, x: 300, y: 100, radius: 50, // start and end angles in degrees start: 0, end: 200 });Result:
jCanvas example: Arc
绘制一个圆形：
举例来说，下面是如何只使用圆弧形状来绘制出一个简单的笑脸图形：
$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 });请记住，jCanvas是基于jQuery的，因此，你可以像jQuery的链式操作一样，在jCanvas中也可以使用链式操作。
下面是以上代码在浏览器中的效果：
相关文章
精彩导读
热门资讯
关注我们
