简介 jCanvas:当 jQuery 遇上 HTML5 Canvas

2,050 阅读9分钟
原文链接: segmentfault.com

HTML5 可以直接在你的网页中使用 canvas 元素及其相关的 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文件。

项目的脚本文件将是这个样子: