HTML:

<h2>jCanvas example: Animating Layers</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'); // 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 可以很容易的利用相关的回调函数来实现这一点：

比方说，当用户完成拖动层之后，你想在页面上显示一条消息，你可以通过添加一个回调函数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

原文链接：

翻译自力谱宿云 LeapCloud旗下MaxLeap团队_前端研发人员：Ammie白

中文翻译首发： https://blog.maxleap.cn/archi...

译者简介：新晋前端一枚，目前负责 MaxLeap 网站展示性内容的实现。喜欢自己尝试写一些js特效小Demo。

相关文章

无需Flash实现图片裁剪——HTML5中级进阶

作者往期佳作

如何结合Gulp使用PostCss 活动预告

报名链接：

Tags：Canvas   jQuery