摘要:上面的代码片段表示,存储对象到一个名为的变量中。这也是一个可选的参数,如果不设置,则默认为摇摆动画完成之后的回调函数,也是可选的。
HTML5 可以直接在你的网页中使用 元素及其相关的 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文件。
项目的脚本文件将是这个样子:
下面是矩形的示例代码:
HTML:
jCanvas example: Rectangle
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:
jCanvas example: Arc
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中也可以使用链式操作。
下面是以上代码在浏览器中的效果:
HTML:
jCanvas example: Smiling Face
CSS:
body { text-align: center; } canvas { margin: auto; display: block; }JS:
// 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 });Result:
jCanvas example: Smiling Face
绘制线条和路径你可以用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,从而所绘制的线和角都是闭合的。
HTML:
jCanvas example: Connected lines
CSS:
body { text-align: center; } canvas { margin: auto; display: block; }JS:
// 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 });Result:
jCanvas example: Connected lines
还可以使用drawPath()方法绘制路径。
该drawPath()方法设置 x 和 y值,你还需要制定你要绘制的路径的类型,例如直线,圆弧等。
下面教你如何使用 drawPath()方法和drawarrows()方法画出一对水平和垂直方向的箭头,后者是一个非常好用的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 } });结果展示:
HTML:
jCanvas example: Connected Arrows
CSS:
body { text-align: center; } canvas { margin: auto; display: block; }JS:
// 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 } });Result:
jCanvas example: Connected Arrows
绘制文本你可以使用drawText()方法快速的绘制出你需要的文字,这个方法的主要的功能:
text:将此属性设置为你想要显示在画布上的文字内容:例如:‘Hello World’
fontsize:此属性的值决定了在画布上的文字的大小。你可以为这个属性设置为一个数字,jCanvas默认为像素。另外,你也可以使用pt,但是在这种情况下,你需要用引号将属性值包括起来
fontFamily:允许你指定您的文字图像的字体:"Verdana, sans-serif"。
这里的示例代码:
$myCanvas.drawText({ text: "Canvas is fun", fontFamily: "cursive", fontSize: 40, x: 290, y: 150, fillStyle: "lightblue", strokeStyle: "blue", strokeWidth: 1 });在浏览器中将是这样的效果:
HTML:
jCanvas example: Drawing text
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:
jCanvas example: Importing and manipulating an image
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:
jCanvas example: Drawing a rectangle with addLayer()
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:
jCanvas example: Using drawing method with layer set to "true"
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()方法,快速的在你的基础图层上添加动画,此方法接受以下参数:
该层的 index 或者 name
具有键值对的动画对象
以毫秒为单位的动画时长(duration)。这是个默认的参数,如果不设置,默认为400
动画的运动方式(easing )。这也是一个可选的参数,如果不设置,则默认为摇摆
动画完成之后的回调函数(callback),也是可选的。
让我们来看一下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"); });看一下下面例子中的动画:
HTML:
jCanvas example: Animating Layers
CSS:
body { text-align: center; } canvas { margin: auto; display: block; }JS:
// 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"); });Result:
jCanvas example: Animating Layers
可拖动图层我想提醒你注意的是它还有一个很酷的功能,你可以在可拖动层里设置draggable属性和layer 属性的值为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:当你正在拖动图层时发生
dragstop:当你停止拖动图层时的触发器
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,一个新的基于jQuery能与HTML5的 Canvas API一起使用的库。我已经简单的介绍了一些jCanvas的属性和方法,能够让你快速的在画布和是哪个绘制图形,增加视觉效果,动画和拖动图层。
你可以访问jCanvas文档,这里有很多的详细指导和示例。你要可以在 jCanvas网站的 sandbox上进行快速测试。
作者信息
原文作者:Maria Antonietta Perna
原文链接:http://t.cn/Rt82jVj
翻译自力谱宿云 LeapCloud旗下MaxLeap团队_前端研发人员:Ammie白
中文翻译首发:https://blog.maxleap.cn/archi...
译者简介:新晋前端一枚,目前负责 MaxLeap 网站展示性内容的实现。喜欢自己尝试写一些js特效小Demo。相关文章
无需Flash实现图片裁剪——HTML5中级进阶作者往期佳作
如何结合Gulp使用PostCss活动预告
报名链接:http://t.cn/Rt9ooRw
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/87866.html
摘要:一些浏览器支持嵌套媒体查询,例如,和但是和目前并没有支持嵌套媒体查询。因此,一方面,我们有一个断点管理器从断点的全局中选择并处理错误消息,另一方面有一个断点管理器允许使用多查询条件。 如果你对 Sass不太熟悉的话,你可能不知道Sass增加了许多非常有趣的功能,例如媒体查询(即 @media)功能(经常被成为 Media Merging媒体合并)。 showImg(https://se...
摘要:原文链接译文来自我的博客简介如果你想用做个游戏,那么来对地方了。现在可以看到字母在屏幕上移动了,恭喜你,你已经快入门了。 原文链接 译文来自我的博客 简介 如果你想用canvas做个游戏,那么来对地方了。 但是但是你至少知道javascript怎么拼写(╯‵□′)╯︵┻━┻ 既然没问题,那先来玩一下或者下载 创建canvas标签 废话不多说,我们必须创建一个canvas标签,简单起见,...
阅读 2932·2021-09-22 14:59
阅读 1740·2021-09-22 10:02
阅读 2048·2021-09-04 16:48
阅读 2139·2019-08-30 15:53
阅读 2920·2019-08-30 11:27
阅读 3370·2019-08-29 18:35
阅读 868·2019-08-29 17:07
阅读 2624·2019-08-29 13:27