jcanvas简介：jQuery遇到HTML5画布

> html5允许您使用元素及其相关的JavaScript API直接将图形绘制到网页中。

>在这篇文章中，我将向您介绍HTML5 Canvas API的免费且基于开源的jQuery库Jcanvas。

如果您使用jQuery开发，JCANVAS可以使使用jQuery语法更容易，更快地编码酷画布图和交互式应用程序。

钥匙要点

> JCANVAS是一个免费的开源库，可将jQuery与HTML5 Canvas API集成，简化了使用jQuery语法的图形和交互式应用程序的创建。
要利用jcanvas，您的项目必须包含jcanvas脚本和jQuery，从而实现了基于jQuery结构的jcanvas方法的使用。
• >
JCanvas通过其他功能（例如图层，事件，拖放和动画）增强了本机帆布API，同时保持与本机帆布方法的兼容性。
• >画布上的绘制形状，文本和图像通过jcanvas进行了简化，并采用drawRect（），drawarc（）和drawarc（）和drawimage（）等方法，这些方法接受各种可自定义的属性。
• > JCANVAS支持高级功能，例如层操作和动画，允许在网页上进行复杂的图形创建和动态，交互式用户体验。
>
什么是jcanvas？

jcanvas网站说明：

Janvas是一个使用jQuery和jQuery编写的JavaScript库，它包裹在HTML5 Canvas API上，添加了新功能和功能，其中许多功能是可自定义的。功能包括层，事件，拖放，动画等等。

>

结果是包裹在含糖的jQuery风格语法中的灵活的API，它为HTML5画布带来了动力和轻松。

> jcanvas使您能够使用本机帆布API以及更多事情来完成所有可以做的事情。如果愿意，也可以使用JCanvas使用本机HTML5 Canvas API方法。 draw（）方法仅实现此目的。此外，您可以使用自己的方法和属性轻松地扩展Jcanvas。

>向您的项目添加JCanvas

要在您的项目中包括JCanvas，请从官方网站或GitHub页面下载脚本，然后将其包含在项目文件夹中。如前所述，jcanvas需要jQuery工作，因此请确保也包括在内。

>

您的项目的脚本文件将看起来像这样：

最后一个是您使用jcanvas api放置自定义JavaScript的地方。现在，让我们带jcanvas进行试驾。

设置HTML文档

跟随示例，首先将元素标签添加到基本的HTML5文档。

<scriptjs><span><span><span></span>></span>
</span><scriptjs><span><span><span></span>></span>
</span><scriptjs><span><span><span></span>></span></span></scriptjs></scriptjs></scriptjs>

如果您想了解有关该主题的更多信息，HTML5 Canvas Tutorial：Ivaylo Gerchev的介绍是一本很棒的阅读。

> JCANVAS方法和属性已经包含对2D上下文的引用，因此您可以直接跳入图形。

用jcanvas绘制形状

大多数jcanvas方法接受属性值对的地图，您可以按照自己喜欢的任何顺序列出。

开始，让我们从绘制矩形形状开始。

>

矩形形状

这是您使用jcanvas对象的drawRect（）方法绘制矩形形状的方式。

>上方的摘要将画布对象缓存到一个称为$ mycanvas的变量中。 drawRect（）方法中的属性主要是不言自明的，但这是一个简短的摘要：

填充设置矩形的背景颜色;

<span><span><span><canvas> id<span>="myCanvas"</span> width<span>="600"</span> height<span>="300"</span>></canvas></span>
</span>  <span><span><span><p>></p></span>This is fallback content 
</span>  for users of assistive technologies 
  or of browsers that don't have 
  full support for the Canvas API.<span><span><span></span>></span>
</span><span><span><span></span></span></span></span></span>

>>

strokestyle设定了边界颜色; >

> streokewidth设置了形状的边界宽度; >

x和y设置了与矩形内部水平和垂直位置相对应的坐标。
• 0
的值
• > x
和
• 0
的值
• > y> y，即（0，0），对应于左上角画布。 X坐标向右增加，Y坐标朝向画布的底部。当绘制矩形时，默认情况下，Jcanvas将X和Y坐标置于形状的中心。 更改它，以使x和y对应于矩形的左上角，将funcenter属性设置为false。 最后，宽度和高度属性设置了矩形的尺寸。> 这是一个带有矩形形状的演示：

请参见pen jcanvas示例：codepen上的sitepoint（@sitepoint）矩形。

弧和圆

弧是圆圈边缘的一部分。使用JCANVAS，绘制弧只是设置Drawarc（）方法中一些属性的所需值：>

的问题。

<scriptjs><span><span><span></span>></span>
</span><scriptresult data-height="411" data-slug-hash="eJrJoK" data-theme- data-user="SitePoint">

绘制一个圆就像从drawarc（）方法中省略启动和结束属性一样容易。<p>>
例如，您可以仅使用弧形绘制笑脸的简单图形：</p>


<p>

</p>请记住，jcanvas是基于jQuery库，因此您可以像可以链接jQuery方法一样链接jcanvas方法。<pre class="brush:php;toolbar:false"><span><span><span><canvas> id<span>="myCanvas"</span> width<span>="600"</span> height<span>="300"</span>></canvas></span>
</span>  <span><span><span><p>></p></span>This is fallback content 
</span>  for users of assistive technologies 
  or of browsers that don't have 
  full support for the Canvas API.<span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span>

。

这是上面的代码在浏览器中呈现的方式：>

请参阅pen jcanvas示例：codepen上的sitepoint（@sitepoint）微笑。

绘图线和路径

>您可以使用drawline（）方法快速用jcanvas绘制线条，并绘制一系列要连接的点。

>

上面的代码将圆形和封闭的属性设置为True，从而将行的角落舍入并关闭追踪路径。

<span>var canvas = document.getElementById('myCanvas'),
</span>    context <span>= canvas.getContext('2d');</span>

请参阅pen jcanvas示例：codepen上的sitepoint（@sitepoint）连接行。

>您还可以使用drawpath（）方法绘制灵活路径。将路径视为一个或多个连接的线，弧，曲线或向量。>

drawpath（）方法接受每个点内部的子路径的点映射和x和y坐标的映射。您还需要指定要绘制的路径类型，例如，线，弧等。

>这是您可以使用drawpath（）和draw arrows（）绘制一对水平和垂直指向箭头的连接的方法，后者是一种方便的jcanvas方法，使您能够快速在画布上绘制箭头形状：

每个子路径的x和y坐标相对于整个路径的x和y坐标。

>这是结果：

请参阅pen jcanvas示例：codepen上的sitepoint（@sitepoint）连接的箭头。

<span>// Store the canvas object into a variable
</span><span>var $myCanvas = $('#myCanvas');
</span>
<span>// rectangle shape 
</span>$myCanvas<span>.drawRect({
</span>  <span>fillStyle: 'steelblue',
</span>  <span>strokeStyle: 'blue',
</span>  <span>strokeWidth: 4,
</span>  <span>x: 150, y: 100,
</span>  <span>fromCenter: false,
</span>  <span>width: 200,
</span>  <span>height: 100
</span><span>});</span>

绘制文本

>您可以使用恰当命名的drawText（）方法在画布上快速绘制文本。您需要工作的主要属性是：

>

• >文本。将此属性设置为您要在画布上显示的文本内容：例如'Hello World'
fontsize。此属性的值确定了画布上文本的大小。您可以用一个数字设置该属性的值，jcanvas将其解释为像素中的值：fontsize：30。另外，您可以使用点，但是在这种情况下，您需要在引号中指定测量值：fontsize：'30pt：'30pt '
fontfamily允许您为文本图像指定字体：'verdana，sans-serif'。

这是示例代码：

<scriptjs><span><span><span></span>></span>
</span><scriptresult data-height="403" data-slug-hash="KVRzPZ" data-theme- data-user="SitePoint">

绘制图像<h2>
</h2>>您可以使用drawimage（）方法导入和操纵图像。这是一个示例：<p>

</p>

<pre class="brush:php;toolbar:false"><span><span><span><canvas> id<span>="myCanvas"</span> width<span>="600"</span> height<span>="300"</span>></canvas></span>
</span>  <span><span><span><p>></p></span>This is fallback content 
</span>  for users of assistive technologies 
  or of browsers that don't have 
  full support for the Canvas API.<span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span>

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

请参阅pen jcanvas示例：通过codepen上的sitepoint（@sitepoint）导入和操纵图像。

>您可以在此处查看和摆弄上面的所有示例中的所有示例。

>

帆布层

>如果您曾经使用过photoshop或gimp等图像编辑器应用程序，那么您已经熟悉层。使用层的很酷的部分是，您可以通过在自己的层上绘制它来单独操纵画布上的每个图像。 JCanvas提供了一个强大的层API，可为您的基于画布的设计增加灵活性。

以下是如何使用jcanvas层的概述。

>

添加图层

>您只能在每一层上绘制一个对象。您可以通过两种方式中的任何一种将图层添加到您的JCANVAS项目中：

使用addlayer（）方法，然后是drawlayers（）方法

>将图层属性设置为true在任何绘图方法中

• 这是您应用第一个绘制蓝色矩形的技术的方式。
>
请参阅codepen上的sitepoint（@sitepoint）的笔pzengp。

>这是您应用第二种方法来绘制相同矩形的方法：>

>请参阅codepen上的sitepoint（@sitepoint）的笔zrjqkb。 如您所见，在上面的每一个中，我们都会得到相同的结果。>

>上面两个代码示例中要注意的重要点是，该层具有您通过名称属性设置的名称。这使得可以轻松地在代码中引用此层并使用它进行各种酷炫的事情，例如更改其索引值，对其进行动画，将其删除等等。

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

动画层

>您可以使用AnimateLayer（）方法将动画快速添加到基于图层的图纸中。此方法接受以下参数：

• index或名称
>
• >具有键值对的对象，以动画
• 动画的持续时间毫秒。这是一个可选的参数，如果您不设置它，则默认为> 400
> 动画的
。这也是一个可选参数，如果您不设置它，则默认为swing
>当动画完成时运行的可选回调函数。

>让我们看看AnimateLayer（）方法中的方法。我们将在一层上绘制一个半透明的橙色圆圈，然后对其位置，颜色和不透明度属性进行动画：

>

<scriptjs><span><span><span></span>></span>
</span><scriptresult data-height="413" data-slug-hash="xZjVqv" data-theme- data-user="SitePoint">请参阅pen jcanvas示例：通过sitepoint（@sitepoint）在codepen上进行动画层。

<p>您可以查看此Codepen演示中的所有前三个示例。
<anclable layers>
<h3>>我想引起您注意的另一个很酷的功能是将常规jcanvas层变成可拖动图层的能力，只需将图层的可拖动属性设置为true即
</h3>这是：<p>

</p>

<p>上面的摘要通过合并：拖动：true来绘制两个可拖动的矩形层。另外，请注意使用Bringtofront属性，该属性确保当您拖动一层时，它会自动将其推向所有其他现有层的前部。<ancy>>
</ancy></p>>最后，代码旋转图层并设置了一个盒子阴影，只是为了展示如何快速将这些效果添加到Jcanvas图纸中。<pre class="brush:php;toolbar:false"><span><span><span><canvas> id<span>="myCanvas"</span> width<span>="600"</span> height<span>="300"</span>></canvas></span>
</span>  <span><span><span><p>></p></span>This is fallback content 
</span>  for users of assistive technologies 
  or of browsers that don't have 
  full support for the Canvas API.<span><span><span></span></span></span></span></span>

> >

结果看起来像这样：

如果您希望您的应用在移动可拖动层之前，之中或之后做某事，Jcanvas可以轻松地通过在相关事件期间支持回调函数来实现此目的：

当您开始拖动图层时，

拖动触发器

拖动图层

时拖动火 停止拖动图层

时
• dragstop触发 当您将图层从画布的图表的边框上拖出时，就会发生dragcancel。
>假设您想在用户完成拖动图层后在页面上显示一条消息。您可以通过在Dragstop事件中添加回调函数来重复上述代码段，例如：
• >

  <script src="js/jquery.min.js><span%20><span%20><span%20></script</span>></span>%0A</span><script%20src=" js><span ><span ><span ></script>>
  <script src="js/script.js><span%20><span%20><span%20></script</span>></span></span>

  %0A%0A

  %E6%8B%96%E5%8A%A8%E6%AF%8F%E4%B8%AA%E6%AD%A3%E6%96%B9%E5%BD%A2%E5%90%8E%EF%BC%8C%E6%82%A8%E4%BC%9A%E5%9C%A8%E9%A1%B5%E9%9D%A2%E4%B8%8A%E7%9C%8B%E5%88%B0%E4%B8%80%E6%9D%A1%E6%B6%88%E6%81%AF%EF%BC%8C%E5%91%8A%E8%AF%89%E6%82%A8%E5%88%9A%E5%88%9A%E6%8E%89%E8%90%BD%E7%9A%84%E9%A2%9C%E8%89%B2%E6%AD%A3%E6%96%B9%E5%BD%A2%E3%80%82%E5%9C%A8%E4%B8%8B%E9%9D%A2%E7%9A%84%E6%BC%94%E7%A4%BA%E4%B8%AD%E5%B0%9D%E8%AF%95%E4%B8%80%E4%B8%8B%EF%BC%9A

  %0A>请参阅codepen上的sitepoint（@sitepoint）的pen拖曳jcanvas层。

  结论 在这篇文章中，我向您介绍了Jucanvas，这是一个与HTML5 Canvas API一起使用的新的基于jQuery的库。我已经说明了一些jcanvas方法和属性，这些方法和属性很快使您能够在画布表面上绘制，添加视觉效果，动画和可拖动图层。

  >还有很多，您可以使用jcanvas做。您可以访问JCANVAS文档以获取详细的指导和示例，您可以在jcanvas网站上的沙箱中快速测试。>

  为了伴随本文，我使用JCANVAS DRAWLINE（）方法在Codepen上汇总了一个基本的绘画应用程序： 请参阅codepen上的sitepoint（@sitepoint）的笔jcanvas绘画应用。

  >随意通过添加更多功能并与SitePoint社区分享您的结果来使其变得更好。

  经常询问的问题（常见问题解答）： 什么是jcanvas，它与jQuery和html5画布有何关系？

  > jcanvas是一个功能强大的JavaScript库，它结合了jQuery和jquery和html5 canvas的功能，以简化在网页上创建复杂图形的过程。它利用了jQuery的简单性和多功能性，jQuery是一个快速，小且功能丰富的JavaScript库，以及HTML5 Canvas的图形功率，这是用于在网页上绘制图形的HTML元素。 Jcanvas为绘画形状，创建动画，处理事件等提供了一个简单，一致的API。在您的html文件中包括jQuery库和jcanvas库。您可以从其各自的网站下载这些库，也可以使用内容交付网络（CDN）。包含这些库后，您可以开始使用JCANVAS功能在画布上绘制。>

  >如何使用jcanvas？

  jcanvas提供几种功能，提供了几个功能来在帆布上绘制形状。例如，您可以使用drawRect（）函数绘制矩形，drawarc（）函数绘制弧和drawpolygon（）函数来绘制多边形。这些功能中的每一个都接受一个属性对象，该对象指定了形状的特征，例如其位置，大小，颜色等。

  >我可以用jcanvas吗？您可以使用Animate（）函数在指定的持续时间内对形状的属性进行动画。此功能使用jQuery动画引擎，因此它支持JQuery提供的所有宽松功能。

  >如何使用JCANVAS处理事件？

  JCANVAS提供了几个功能来处理帆布上的事件。例如，您可以使用click（）函数来处理单击事件，鼠标（）函数来处理鼠标事件，以及mousedown（）函数来处理Mousedown事件。这些函数中的每个功能都接受事件发生时调用的回调函数。>

  >我可以使用jcanvas创建复杂的图形吗？在网页上。它提供了广泛的功能来绘制形状，创建动画，处理事件等等。借助JCanvas，您可以创建从简单形状到复杂动画和交互式图形的任何内容。

  > JCANVAS与所有浏览器兼容吗？

  JCANVAS与支持HTML5 Canvas元素的所有现代浏览器兼容。这包括Google Chrome，Mozilla Firefox，Apple Safari和Microsoft Edge的最新版本。但是，它不支持Internet Explorer 8或更早，因为这些浏览器不支持HTML5 Canvas元素。>

  >如果您遇到JCanvas的问题，我该如何对问题进行故障排除？您可以检查控制台中是否有错误消息，因为Jcanvas提供了详细的错误消息，以帮助您解决问题。您还可以参考Jucanvas文档，该文档提供有关图书馆及其功能的全面信息。

  >我可以在商业项目中使用JCANVAS吗？这意味着您可以在个人和商业项目中免费使用它。但是，您必须在软件或其文档的任何副本中包含原始版权通知和免责声明。>

  >我在哪里可以找到有关janvas的更多资源？它的官方网站提供了全面的文档，示例和教程。您还可以在Web开发网站和论坛上找到有用的信息，例如堆栈溢出和站点点。>

以上是jcanvas简介：jQuery遇到HTML5画布的详细内容。更多信息请关注PHP中文网其他相关文章！