<p>HTML5 可以直接在你的网页中使用 <strong>canvas</strong> <a href="/misc/goto?guid=4959676922226434294" rel="nofollow">元素</a>及其相关的 <a href="/misc/goto?guid=4959676922324603901" rel="nofollow">JavaScript API</a>绘制的图形。</p>    <p>在这篇文章中，我将向你介绍 <a href="/misc/goto?guid=4959676922411584025" rel="nofollow">jCanvas</a>，一个基于 jQuery的免费且开源的 HTML5的Canvas API。</p>    <p>如果你使用 jQuery 进行开发，jCanvas能够使用 jQuery更简单，更快速的完成一些非常炫酷的 canvas画布及交互效果。</p>    <h2>什么是 jCanvas ？</h2>    <p>jCanvas 官网是这样解释的：</p>    <p>“ 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.</p>    <p>The result is a flexible API wrapped up in a sugary, jQuery-esque syntax that brings power and ease to the HTML5 canvas. ”</p>    <p>jCanvas 能让你做的一切事情，你都可以用原生的Canvas API来实现，甚至可以做更多的事情。如果你愿意的话，你也可以将原生的Canvas API方法和 jCanvas一起使用。<a href="/misc/goto?guid=4959676922510385715" rel="nofollow">draw()方法</a>就可以这样使用。此外，你还可以非常轻松的用自己的方法结合 <a href="/misc/goto?guid=4959676922594997922" rel="nofollow">extend()函数</a>来扩展jCanvas的功能。</p>    <h2>添加jCanvas 到你的项目中</h2>    <p>将jCanavs添加在你的项目中，从官方网站或<a href="/misc/goto?guid=4959676922680183052" rel="nofollow">GitHub的页面</a>上<a href="/misc/goto?guid=4959676922780930211" rel="nofollow">下载脚本</a>，然后将脚本文件放在你的项目文件夹中。正如前面说的，jCanvas需要依赖 jQuery才能正常工作，所以还要确保引入了 jQuery文件。</p>    <p>项目的脚本文件将是这个样子：</p>    <pre>  <code class="language-javascript"><script src="js/jquery.min.js></script>    <script src="js/jcanvas.min.js></script>    <script src="js/script.js></script></code></pre>    <p> </p>    <p>最后，引入你自己的JavaScript 代码文件。现在，让我们开始jCanvas之旅吧。</p>    <p> </p>    <h2>设置 HTML文档</h2>    <p>我们通过为 HTMl5文档添加一个<canvas>标签，来开始我们的示例。</p>    <pre>  <code class="language-javascript"><canvas id="myCanvas" width="600" height="300">    <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></code></pre>    <p> </p>    <p>以下是关于上面的代码片段的几点说明。</p>    <p> </p>    <ol>     <li>默认情况下，<canvas>的尺寸300px <strong>x</strong> 150px，你可以在width 和 height 属性里修改默认的大小。</li>     <li>id属性不是必须添加的，但是确是 JavaScript访问该元素的最简单的方法。</li>     <li>在<canvas>元素中的内容只是位图，这使得它无法被使用辅助技术的用户访问。另外，对<a href="/misc/goto?guid=4959676922873129376" rel="nofollow">不支持 Canvas API</a>的浏览器，将不能够访问其内容或者任何方式的交互。因此，该技术旨在让<canvas><a href="/misc/goto?guid=4959676922954571169" rel="nofollow">更容易被支持</a>。</li>    </ol>    <p>如果你想使用原生的Canvas API，你的 JavaScript 代码将会这样的：</p>    <pre>  <code class="language-javascript">var canvas = document.getElementById('myCanvas'),    context = canvas.getContext('2d');</code></pre>    <p> </p>    <p>上述代码中的context变量存储了Canvas对象的一个2D上下文属性。正是这种特性，使得你可以访问 HTML5的 Canvas API提供的所有其他属性和方法。</p>    <p> </p>    <p>如果你想了解的更多，你可以戳这里<a href="/misc/goto?guid=4959676923040837512" rel="nofollow">HTML5 Canvas 简介</a>。</p>    <p>jCanvas的方法和属性已经包含了2D上下文的引用，因此你可以直接的跳到绘制图片。</p>    <h2>用jCanvas绘制一些图形</h2>    <p>大多数的 jCanvas方法，接受键值对的形式，因此你可以根据你的需要，或你喜欢的顺序去使用它们。</p>    <p>让我们从绘制一个矩形开始吧。</p>    <h2>矩形</h2>    <p>下面是你怎样用 jCanvas对象的 <a href="/misc/goto?guid=4959676923116543221" rel="nofollow">drawRect() 方法</a>绘制出一个矩形的方法。</p>    <pre>  <code class="language-javascript">// 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    });</code></pre>    <p> </p>    <p>上面的代码片段表示，存储 Canvas对象到一个名为$myCanvas的变量中。里面的drawRect()方法的属性都是比较简单的，但是我们在这里简单的阐述一下：</p>    <p> </p>    <ol>     <li>fillStyle 设置矩形的背景色;</li>     <li>strokeStyle 设置它的边框颜色;</li>     <li>strokeWidth 设置矩形的边框宽度;</li>     <li>x 和 y设置对应矩形的坐标的水平和垂直的画布内测的位置。顶点的0值的分别为 x和y，也就是说，（0，0），对应于画布的左上角。x坐标向右增大，y坐标朝向画布的底部增加。默认情况下，jCanvas会以矩形的中心点作为x和y坐标的值;</li>     <li>要想改变这一点，以便x和y对应矩形的左上角，可以将fromCenter属性的值设置为 false;</li>     <li>最后，通过宽度和高度属性设置矩形的尺寸。</li>    </ol>    <p><img alt="简介 jCanvas：当 jQuery遇上HTML5 Canvas" src="https://simg.open-open.com/show/188da71ed2be47ade121c53738ba6248.png"></p>    <p>下面是矩形的示例代码：</p>    <p>HTML：</p>    <pre>  <code class="language-javascript"><h2>jCanvas example: Rectangle</h2>      <canvas id="myCanvas" width="600" height="300">        <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></code></pre>    <p> </p>    <p>CSS:</p>    <p> </p>    <pre>  <code class="language-javascript">body {      text-align: center;    }      canvas {      margin: auto;      display: block;    }</code></pre>    <p> </p>    <p>JS:</p>    <p> </p>    <pre>  <code class="language-javascript">// 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    });</code></pre>    <p> </p>    <p>Result:</p>    <p> </p>    <p>jCanvas example: Rectangle</p>    <p><img alt="简介 jCanvas：当 jQuery遇上HTML5 Canvas" src="https://simg.open-open.com/show/d4ba6e1784fea98e30022cda1ed4e65a.png"></p>    <h2>圆弧和圆</h2>    <p>弧是一个圆的边缘部分。对于jCanvas来说，画一个圆弧仅仅是在 <a href="/misc/goto?guid=4959676923214092666" rel="nofollow">drawArc() 方法</a>里设置几个所需的属性：</p>    <pre>  <code class="language-javascript">$myCanvas.drawArc({      strokeStyle: 'steelblue',      strokeStyle: 'blue',      strokeWidth: 4,      x: 300, y: 100,      radius: 50,      // start and end angles in degrees      start: 0, end: 200    });</code></pre>    <p> </p>    <p>绘制弧形，需要设置半径属性的值，以及开始的角度和结束的角度。如果你希望弧形是逆时针方向的话，需要添加一个ccw属性，并将其属性值设置为true。</p>    <p> </p>    <p>下面是上述代码块演示：</p>    <p>HTML:</p>    <pre>  <code class="language-javascript"><h2>jCanvas example: Arc</h2>      <canvas id="myCanvas" width="600" height="300">      <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></code></pre>    <p> </p>    <p>CSS：</p>    <p> </p>    <pre>  <code class="language-javascript">body {      text-align: center;    }      canvas {      margin: auto;      display: block;    }</code></pre>    <p> </p>    <p>JS：</p>    <p> </p>    <pre>  <code class="language-javascript">// 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    });</code></pre>    <p> </p>    <p>Result:</p>    <p> </p>    <p>jCanvas example: Arc</p>    <p><img alt="简介 jCanvas：当 jQuery遇上HTML5 Canvas" src="https://simg.open-open.com/show/f05b50e339340eef58592c0d6042a8da.png"></p>    <p>绘制一个圆形：</p>    <p>举例来说，下面是如何只使用圆弧形状来绘制出一个简单的笑脸图形：</p>    <pre>  <code class="language-javascript">$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    });</code></pre>    <p> </p>    <p>请记住，jCanvas是基于jQuery的，因此，你可以像jQuery的链式操作一样，在jCanvas中也可以使用链式操作。</p>    <p> </p>    <p>下面是以上代码在浏览器中的效果：</p>    <p>HTML:</p>    <pre>  <code class="language-javascript"><h2>jCanvas example: Smiling Face</h2>      <canvas id="myCanvas" width="600" height="300">      <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></code></pre>    <p> </p>    <p>CSS:</p>    <p> </p>    <pre>  <code class="language-javascript">body {      text-align: center;    }      canvas {      margin: auto;      display: block;    }</code></pre>    <p> </p>    <p>JS:</p>    <p> </p>    <pre>  <code class="language-javascript">// 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    });</code></pre>    <p> </p>    <p>Result:</p>    <p> </p>    <p>jCanvas example: Smiling Face</p>    <p><img alt="简介 jCanvas：当 jQuery遇上HTML5 Canvas" src="https://simg.open-open.com/show/26006e1c6421b0857aae242213472395.png"></p>    <h2>绘制线条和路径</h2>    <p>你可以用<a href="/misc/goto?guid=4959676923292452854" rel="nofollow">drawLine()方法</a>快速的绘制直线，或者定义一系列的线条的连接点。</p>    <pre>  <code class="language-javascript">$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    });</code></pre>    <p> </p>    <p>上面代码设置了 rounded和closed属性的值为true，从而所绘制的线和角都是闭合的。</p>    <p> </p>    <p>HTML:</p>    <pre>  <code class="language-javascript"><h2>jCanvas example: Connected lines</h2>      <canvas id="myCanvas" width="600" height="300">      <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></code></pre>    <p> </p>    <p>CSS:</p>    <p> </p>    <pre>  <code class="language-javascript">body {      text-align: center;    }      canvas {      margin: auto;      display: block;    }</code></pre>    <p> </p>    <p>JS:</p>    <p> </p>    <pre>  <code class="language-javascript">// 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    });</code></pre>    <p> </p>    <p>Result:</p>    <p> </p>    <p>jCanvas example: Connected lines</p>    <p><img alt="简介 jCanvas：当 jQuery遇上HTML5 Canvas" src="https://simg.open-open.com/show/35001b8a98b03f5a8a44c0f5aa50dfda.png"></p>    <p>还可以使用<a href="/misc/goto?guid=4959676923378040214" rel="nofollow">drawPath()方法</a>绘制路径。</p>    <p>该drawPath()方法设置 x 和 y值，你还需要制定你要绘制的路径的类型，例如直线，圆弧等。</p>    <p>下面教你如何使用 drawPath()方法和<a href="/misc/goto?guid=4959676923458180583" rel="nofollow">drawarrows()方法</a>画出一对水平和垂直方向的箭头，后者是一个非常好用的jCanvas方法，能够使你快速的在画布上绘制一个箭头形状：</p>    <pre>  <code class="language-javascript">$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      }    });</code></pre>    <p> </p>    <p>结果展示：</p>    <p> </p>    <p>HTML：</p>    <pre>  <code class="language-javascript"><h2>jCanvas example: Connected Arrows</h2>      <canvas id="myCanvas" width="600" height="300">      <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></code></pre>    <p> </p>    <p>CSS：</p>    <p> </p>    <pre>  <code class="language-javascript">body {      text-align: center;    }      canvas {      margin: auto;      display: block;    }</code></pre>    <p> </p>    <p>JS:</p>    <p> </p>    <pre>  <code class="language-javascript">// 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      }    });</code></pre>    <p> </p>    <p>Result:</p>    <p> </p>    <p>jCanvas example: Connected Arrows</p>    <p><img alt="简介 jCanvas：当 jQuery遇上HTML5 Canvas" src="https://simg.open-open.com/show/9230b0b08a4d66ec57ebb98d8e26e6be.png"></p>    <h2>绘制文本</h2>    <p>你可以使用<a href="/misc/goto?guid=4959676923536017324" rel="nofollow">drawText()方法</a>快速的绘制出你需要的文字，这个方法的主要的功能：</p>    <ol>     <li>text：将此属性设置为你想要显示在画布上的文字内容：例如：‘Hello World’</li>     <li>fontsize：此属性的值决定了在画布上的文字的大小。你可以为这个属性设置为一个数字，jCanvas默认为像素。另外，你也可以使用pt,但是在这种情况下，你需要用引号将属性值包括起来</li>     <li>fontFamily：允许你指定您的文字图像的字体：’Verdana, sans-serif’。</li>    </ol>    <p>这里的示例代码：</p>    <pre>  <code class="language-javascript">$myCanvas.drawText({      text: 'Canvas is fun',      fontFamily: 'cursive',      fontSize: 40,      x: 290, y: 150,      fillStyle: 'lightblue',      strokeStyle: 'blue',      strokeWidth: 1    });</code></pre>    <p> </p>    <p>在浏览器中将是这样的效果：</p>    <p> </p>    <p>HTML:</p>    <pre>  <code class="language-javascript"><h2>jCanvas example: Drawing text</h2>      <canvas id="myCanvas" width="600" height="300">      <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></code></pre>    <p> </p>    <p>CSS:</p>    <p> </p>    <pre>  <code class="language-javascript">body {      text-align: center;    }      canvas {      margin: auto;      display: block;    }</code></pre>    <p> </p>    <p>JS:</p>    <p> </p>    <pre>  <code class="language-javascript">// 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    });</code></pre>    <p> </p>    <p>Result:</p>    <p> </p>    <p>jCanvas example: Drawing text</p>    <p><img alt="简介 jCanvas：当 jQuery遇上HTML5 Canvas" src="https://simg.open-open.com/show/fe08ecadf67ba75d10e0c3c8acd1572e.png"></p>    <h2>绘制图片</h2>    <p>你可以使用<a href="/misc/goto?guid=4959676923614896932" rel="nofollow">drawImage()方法</a>来导入和处理图片。下面是一个例子：</p>    <pre>  <code class="language-javascript">$myCanvas.drawImage({      source: 'imgs/cat.jpg',      x: 250, y: 100,      fromCenter: false,      shadowColor: '#222',      shadowBlur: 3,      rotate: 40    });</code></pre>    <p> </p>    <p>这是上面代码的呈现方式：</p>    <p> </p>    <p>HTML:</p>    <pre>  <code class="language-javascript"><h2>jCanvas example: Importing and manipulating an image</h2>      <canvas id="myCanvas" width="600" height="300">      <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></code></pre>    <p> </p>    <p>CSS:</p>    <p> </p>    <pre>  <code class="language-javascript">body {      text-align: center;    }      canvas {      margin: auto;      display: block;    }</code></pre>    <p> </p>    <p>JS:</p>    <p> </p>    <pre>  <code class="language-javascript">// 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    });</code></pre>    <p> </p>    <p>Result:</p>    <p> </p>    <p>jCanvas example: Importing and manipulating an image</p>    <p><img alt="简介 jCanvas：当 jQuery遇上HTML5 Canvas" src="https://simg.open-open.com/show/dfbb9a0f007d14f5afd3ba7add15f470.png"></p>    <p>你可以随便的改变上面示例的代码，戳这里：<a href="/misc/goto?guid=4959676923699346649" rel="nofollow">CodePen demo</a></p>    <h2>Canvas层</h2>    <p>如果你曾经使用过，如Photoshop或Gimp图像编辑器类的应用程序，你可能会对图层有所了解，使用图层最爽的地方在于，你可以在画布上控制每个图像。</p>    <p>jCanvas提供了一个功能强大的<a href="/misc/goto?guid=4959676923778135901" rel="nofollow">API</a>，基于你的画布增加了灵活性。</p>    <p>这里介绍了如何使用jCanvas的层。</p>    <h3>添加图层</h3>    <p>你只能在每一个层上绘制一个对象。在你的jCanvas项目中你有两种添加图层的方式：</p>    <ol>     <li>使用 addLayer()方法，其次是drawLayers()方法</li>     <li>在任何的绘制方法里设置layer属性的值为true</li>    </ol>    <p>下面是如何运用第一种技术来绘制一个蓝色矩形：</p>    <pre>  <code class="language-javascript">$myCanvas.addLayer({      type: 'rectangle',      fillStyle: 'steelblue',      fromCenter: false,      name: 'blueRectangle',      x: 50, y: 50,      width: 400, height: 200    }).drawLayers();</code></pre>    <p> </p>    <p>HTML:</p>    <p> </p>    <pre>  <code class="language-javascript"><h2>jCanvas example: Drawing a rectangle with addLayer()</h2>      <canvas id="myCanvas" width="600" height="300">      <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></code></pre>    <p> </p>    <p>CSS:</p>    <p> </p>    <pre>  <code class="language-javascript">body {      text-align: center;    }      canvas {      margin: auto;      display: block;    }</code></pre>    <p> </p>    <p>JS:</p>    <p> </p>    <pre>  <code class="language-javascript">// 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();</code></pre>    <p> </p>    <p>Result:</p>    <p> </p>    <p><img alt="简介 jCanvas：当 jQuery遇上HTML5 Canvas" src="https://simg.open-open.com/show/baae6dc7bade725d775eba6c10d2e8ca.png"></p>    <p>这里是你如何得到同样矩形的第二种方法：</p>    <pre>  <code class="language-javascript">$myCanvas.drawRect({      fillStyle: 'steelblue',      layer: true,      name: 'blueRectangle',      fromCenter: false,      x: 50, y: 50,      width: 400, height: 200    });</code></pre>    <p> </p>    <p>HTML:</p>    <p> </p>    <pre>  <code class="language-javascript"><h2>jCanvas example: Using drawing method with layer set to "true"</h2>      <canvas id="myCanvas" width="600" height="300">      <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></code></pre>    <p> </p>    <p>CSS:</p>    <p> </p>    <pre>  <code class="language-javascript">body {      text-align: center;    }      canvas {      margin: auto;      display: block;    }</code></pre>    <p> </p>    <p>JS:</p>    <p> </p>    <pre>  <code class="language-javascript">// 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    });</code></pre>    <p> </p>    <p>Result:</p>    <p> </p>    <p><img alt="简介 jCanvas：当 jQuery遇上HTML5 Canvas" src="https://simg.open-open.com/show/baae6dc7bade725d775eba6c10d2e8ca.png"></p>    <p>正如你所看到的，上面的两种方法，我们得到了相同的结果。</p>    <p>最重要的一点是在上面两个代码样本中可以发现，上面的层你通过name设置的一个名称。这使得他易于参照本层的代码做出各种炫酷的东西，像改变其索引值，动画，删除等等。</p>    <p>让我们看看如何能够做到这一点。</p>    <h3>动画层</h3>    <p>你可以使用jCanvas的 <a href="/misc/goto?guid=4959676923867256099" rel="nofollow">animateLayer()方法</a>，快速的在你的基础图层上添加动画，此方法接受以下参数：</p>    <ol>     <li>该层的 index 或者 name</li>     <li>具有键值对的动画对象</li>     <li>以毫秒为单位的动画时长（duration）。这是个默认的参数，如果不设置，默认为400</li>     <li>动画的运动方式（easing ）。这也是一个可选的参数，如果不设置，则默认为摇摆</li>     <li>动画完成之后的回调函数（callback），也是可选的。</li>    </ol>    <p>让我们来看一下animateLayer() 方法的效果，我们将在一个层上绘制一个半透明的橙色圆圈，然后设置动画的位置，颜色以及透明度属性：</p>    <pre>  <code class="language-javascript">// 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');    });</code></pre>    <p> </p>    <p>看一下下面例子中的动画：</p>    <p> </p>    <p>HTML:</p>    <pre>  <code class="language-javascript"><h2>jCanvas example: Animating Layers</h2>      <canvas id="myCanvas" width="600" height="300">      <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></code></pre>    <p> </p>    <p>CSS:</p>    <p> </p>    <pre>  <code class="language-javascript">body {      text-align: center;    }      canvas {      margin: auto;      display: block;    }</code></pre>    <p> </p>    <p>JS:</p>    <p> </p>    <pre>  <code class="language-javascript">// Store the canvas object into a variable    var $myCanvas = $('#myCanvas');      // 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');    });</code></pre>    <p> </p>    <p>Result:</p>    <p> </p>    <p>jCanvas example: Animating Layers</p>    <p><img alt="简介 jCanvas：当 jQuery遇上HTML5 Canvas" src="https://simg.open-open.com/show/3f9931486541667ac7c40e75384ecbe2.png"></p>    <h3>可拖动图层</h3>    <p>我想提醒你注意的是它还有一个很酷的功能，你可以在<a href="/misc/goto?guid=4959676923939728105" rel="nofollow">可拖动层</a>里设置draggable属性和layer 属性的值为true，就可以将一个普通的jCanvas层变成可拖动的层了。</p>    <p>具体方法如下：</p>    <pre>  <code class="language-javascript">$myCanvas.drawRect({      layer: true,      draggable: true,      bringToFront: true,      name: 'blueSquare',      fillStyle: 'steelblue',      x: 250, y: 150,      width: 100, height: 100,      rotate: 80,      shadowX: -1, shadowY: 8,      shadowBlur: 2,      shadowColor: 'rgba(0, 0, 0, 0.8)'    })    .drawRect({      layer: true,      draggable: true,      bringToFront: true,      name: 'redSquare',      fillStyle: 'red',      x: 190, y: 100,      width: 100, height: 100,      rotate: 130,      shadowX: -2, shadowY: 5,      shadowBlur: 3,      shadowColor: 'rgba(0, 0, 0, 0.5)'    });</code></pre>    <p> </p>    <p>在上面的代码段中，通过把属性draggable设置为true，绘制出了两个可拖动的矩形层。此外，请小心使用bringToFront属性，以确保当你拖动层时，他会被自动拖到所有其他现有的图层的前面。</p>    <p> </p>    <p>最后，在上述代码段中添加旋转图层的代码并且设置一个盒子阴影，只是为了告诉你如何快速的在你的jCanvas图纸上添加一些特效。</p>    <p>结果会是这样的：</p>    <p><img alt="简介 jCanvas：当 jQuery遇上HTML5 Canvas" src="https://simg.open-open.com/show/4e6832830cd66ff4398a6a70bdbe9e1f.png"></p>    <p>如果你想在在你拖动图层之前，之间或者之后做一些事情的话，jCanvas 可以很容易的利用相关的回调函数来实现这一点：</p>    <ol>     <li>dragstart：当你开始拖动图层的时候的触发器</li>     <li>drag：当你正在拖动图层时发生</li>     <li>dragstop：当你停止拖动图层时的触发器</li>     <li>dragcancel：当你拖动的图层到了画布表面的边界时发生</li>    </ol>    <p>比方说，当用户完成拖动层之后，你想在页面上显示一条消息，你可以通过添加一个回调函数dragstop来实现，就像这样：</p>    <pre>  <code class="language-javascript">$myCanvas.drawRect({      layer: true,        // Rest of the code as shown above...        // Callback function      dragstop: function(layer) {        var layerName = layer.name;        el.innerHTML = 'The ' + layerName + ' layer has been dropped.';      }    })    .drawRect({      layer: true,        // Rest of the code...        // Callback function      dragstop: function(layer) {        var layerName = layer.name;        el.innerHTML = 'The ' + layerName + ' layer has been dropped.';      }    });</code></pre>    <p> </p>    <p> </p>    <p> </p>    <h2>结论</h2>    <p>在这篇文章中，我向你介绍了jCanvas，一个新的基于jQuery能与HTML5的 Canvas API一起使用的库。我已经简单的介绍了一些jCanvas的属性和方法，能够让你快速的在画布和是哪个绘制图形，增加视觉效果，动画和拖动图层。</p>    <p>你可以访问<a href="/misc/goto?guid=4959676924019215849" rel="nofollow">jCanvas文档</a>，这里有很多的详细指导和示例。你可以在Canvas网站的 <a href="/misc/goto?guid=4959676924101331233" rel="nofollow">sandbox</a>上进行快速测试。</p>    <p><strong>作者信息</strong></p>    <p>原文作者：<a class="external-link" href="/misc/goto?guid=4959676924180095782" rel="nofollow">Maria Antonietta Perna</a></p>    <p>原文链接：<a href="/misc/goto?guid=4959676924259499739">http://t.cn/Rt82jVj</a></p>    <p>翻译自MaxLeap团队_前端研发人员：Ammie白</p>    <p>– 力谱宿云 LeapCloud 首发 –</p>    <p>译者简介：新晋前端一枚，目前负责 MaxLeap 网站展示性内容的实现。喜欢自己尝试写一些js特效小Demo。</p>    <p><strong>相关文章</strong></p>    <p><a href="http://www.open-open.com/lib/view/open1471501424095.html">无需Flash实现图片裁剪——HTML5中级进阶</a></p>    <p> </p>    <p><span style="color:rgb(255, 255, 255)">Save</span></p>