jcanvas_jCanvas简介：jQuery符合HTML5 Canvas

最新推荐文章于 2024-05-10 09:38:40 发布

dingshi7798

最新推荐文章于 2024-05-10 09:38:40 发布

阅读量485

点赞数

文章标签： python java css js javascript ViewUI

原文链接：https://www.sitepoint.com/introduction-to-jcanvas-jquery-meets-html5-canvas/

版权

jcanvas

HTML5使您可以使用<canvas>元素及其相关的JavaScript API将图形直接绘制到网页中。

在这篇文章中，我将向您介绍jCanvas ，这是一个免费的开放源代码的基于jQueryHTML5 Canvas API库。

如果您使用jQuery开发，则jCanvas可以使使用jQuery语法的凉爽的画布绘图和交互式应用程序的编写变得更加轻松快捷。

什么是jCanvas？

jCanvas网站说明：

jCanvas是一个使用jQuery和jQuery编写JavaScript库，它包装了HTML5 canvas API，并添加了许多新特性和功能，其中许多都是可定制的。功能包括图层，事件，拖放，动画等。

结果是灵活的API封装在一个甜美的jQuery式语法中，为HTML5画布带来了强大而便捷的功能。

通过jCanvas，您可以使用本地Canvas API以及其他功能来做所有事情。如果愿意，还可以将本地HTML5 Canvas API方法与jCanvas结合使用。 draw（）方法仅用于此目的。此外，您还可以使用自己的方法和属性，通过其extend（）功能轻松扩展jCanvas。

将jCanvas添加到您的项目

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

您项目的脚本文件将如下所示：

<script src="js/jquery.min.js></script>
<script src="js/jcanvas.min.js></script>
<script src="js/script.js></script>

最后一个是使用jCanvas API放置自定义JavaScript的位置。现在，让我们将jCanvas进行测试。

设置HTML文档

要继续执行示例，请在基本HTML5文档中添加<canvas>元素标签。

<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>

以下是有关上述代码段的一些兴趣点。

默认情况下， <canvas> 绘图表面的尺寸为300px x 150px。您可以在元素标记内的width和height属性中修改此默认大小。
不需要添加id属性，但这是使用JavaScript访问元素的一种简便方法。
<canvas>元素内的内容只是一个位图图像。这使得辅助技术的用户无法使用它。另外，不支持Canvas API的浏览器将无法以任何方式访问其内容或与其进行交互。因此，尽管尚未提供旨在使<canvas>更易访问的技术，但是建议为此类用户添加一些后备内容 。

如果要使用本机Canvas API，则JavaScript如下所示：

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

上面代码中的变量context存储了对Canvas对象的2D上下文属性的引用。通过此属性，您可以访问HTML5 Canvas API公开的所有其他属性和方法。

如果您想了解更多有关该主题的信息，那么Ivaylo Gerchev撰写的HTML5 Canvas Tutorial：An Introduction是一本不错的书。

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
});

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

上面的代码片段将canvas对象缓存到一个名为$myCanvas的变量中。 drawRect()方法内部的属性大部分是不言自明的，但是这里有一个简短的摘要：

fillStyle设置矩形的背景色；
strokeStyle设置其边框颜色；
strokeWidth设置形状的边框宽度；
x和y设置与画布内部矩形的水平和垂直位置相对应的坐标。的x为0和0的对Y，A值即（0，0），对应于左上方的画布的角落。 x坐标向右增加， y坐标向画布的底部增加。绘制矩形时，默认情况下，jCanvas将x和y坐标置于形状的中心。
要更改此值，以使x和y对应于矩形的左上角，请将fromCenter属性设置为false 。
最后， width和height属性设置矩形的尺寸。

在画布上绘制的矩形，带有画布坐标系的说明

这是一个具有矩形形状的演示：

请参见Pen jCanvas示例：在CodePen上按SitePoint（ @SitePoint ）进行矩形排列。

圆弧和圆

圆弧是圆弧边缘的一部分。使用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
});

绘制圆弧涉及为radius属性以及start和end角度（以度为单位）设置一个值。如果您希望圆弧的方向为逆时针方向，请将ccw属性添加到上面的代码中并将其设置为true 。

这是上述代码的CodePen演示：

请参见Pen jCanvas示例： CodePen上的SitePoint （ @SitePoint ）弧。

绘制圆就像从drawArc()方法中省略start和end属性一样容易。

例如，以下是仅使用圆弧形状绘制笑脸的简单图形的方法：

$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方法。

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

请参见Pen jCanvas示例： CodePen上的SitePoint （ @SitePoint ）笑脸。

画线和路径

您可以使用jCanvas使用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 ，从而使直线的角变圆并关闭了跟踪的路径。

请参见Pen jCanvas示例： CodePen上的SitePoint （ @SitePoint ）连接的线。

您还可以使用drawPath（）方法绘制灵活的路径。将路径视为一条或多条相连的线，弧，曲线或矢量。

drawPath()方法为每个点内的子路径接受点的映射以及x和y坐标的映射。您还需要指定要绘制的路径类型 ，例如直线，圆弧等。

这是使用drawPath()和draw arrow（）绘制一对相连的水平和垂直指向的箭头的方法，后者是一种方便的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
  }
});

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

结果如下：

请参见Pen jCanvas示例： CodePen上的SitePoint （ @SitePoint ）连接的箭头。

绘图文字

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

text 。将此属性设置为要在画布上显示的文本内容：例如'Hello world'
fontSize 。此属性的值确定画布上文本的大小。您可以使用数字设置此属性的值，jCanvas将其解释为以像素为单位的值： fontSize: 30 。或者，您可以使用点，但是在这种情况下，您需要在引号内指定尺寸： fontSize: '30pt'
fontFamily允许您为文本图像指定字体： 'Verdana, sans-serif' 。

这是示例代码：

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

这就是网页上<canvas>元素内部的样子：

请参见Pen jCanvas示例：在CodePen上通过SitePoint（ @SitePoint ）绘制文本。

绘图图像

您可以使用drawImage（）方法导入和处理图像。这是一个例子：

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

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

见笔jCanvas例如：导入和处理图像由SitePoint（ @SitePoint上） CodePen 。

您可以在此处查看并摆弄上面的所有示例，并将它们组合成一个CodePen演示。

画布层

如果您曾经使用过诸如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();

请参见CodePen上的SitePoint（ @SitePoint ）提供的Pen PZeNGp 。

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

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

请参阅CodePen上的SitePoint（ @SitePoint ）提供的Pen zrjqKb 。

如您所见，通过以上每种方法，我们得到相同的结果。

上述重要的一点声明同时代码示例是使该层具有您通过设置一个名称 name属性。这使得在代码中引用该层并对其进行各种有趣的操作变得很容易，例如更改其索引值，对其进行动画处理，将其删除等。

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

动画层

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

图层的索引或name
具有键值对属性的对象以进行动画处理
动画的持续时间（以毫秒为单位）。这是一个可选参数，如果您未设置，则默认为400
动画的缓动。这也是一个可选参数，如果您未设置，则默认为swing
动画完成时运行的可选回调函数。

让我们看看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');
});

查看下面的演示以查看动画：

请参见Pen jCanvas示例：在CodePen上通过SitePoint（ @SitePoint ）对图层进行动画处理。

您可以查看此CodePen演示中结合的所有前三个示例。

可拖动图层

我想引起您注意的另一个很酷的功能是，只需将图层的draggable属性设置为true ，就可以将常规jCanvas图层变为可拖动图层。

这是如何做：

$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)'
});

上面的代码段通过合并以下内容绘制了两个可拖动的矩形层： draggable: true 。另外，请注意bringToFront属性的使用，该属性可确保在拖动图层时将其自动推送到所有其他现有图层的前面。

最后，代码旋转图层并设置一个框阴影，以说明如何快速将这些效果添加到jCanvas绘图中。

结果看起来像这样：

可拖动矩形层的示例

如果您希望您的应用在移动可拖动图层之前，之中或之后执行某些操作，则jCanvas可通过在相关事件期间支持回调函数来轻松实现此目的：

开始拖动图层时， dragstart触发
drag图层时drag火焰
dragstop触发器当你停止拖动层
当您将图层dragcancel画布的绘图表面的边界时，将发生dragcancel 。

假设您要在用户完成图层拖动后在页面上显示一条消息。您可以通过在dragstop事件中添加回调函数来重用上面的代码片段，如下所示：

$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.';
  }
});

拖动每个正方形后，您会在页面上看到一条消息，告诉您刚放下的颜色正方形。在下面的演示中尝试一下：

见笔可拖动jCanvas层，回调函数由SitePoint（ @SitePoint上） CodePen 。