开源的HTML5 Canvas画图插件 - Literally Canvas

本文参考：http://site518.net/jquery-drawing-widget-literally-canvas/

　HTML5 Canvas 的出现，使得 JavaScript 在处理图像方面变得非常有利。而今天要给介绍的就是一个 HTML5 的画图组件 - Literally Canvas。

　　Literally Canvas 是一个开源的 jQuery 插件，基于 HTML5 Canvas 技术，另外还使用了 Underscore.js 类库。你可以轻易的将它集成到任何页面中，轻松实现在线画图的功能。它内置了一组简单的画图工具，包含有画图、擦除、颜色选择器、缩放等常用工具。此外，它还提供了一个简单的 API 以便修改背景颜色、工具项等内容。作为一个画图组件，必不可少的就是导出功能，它也提供了一个方法可将画好的图导出为图片。

如何使用

首先在页面中添加 jQuery 框架、underscore.js 以及 Literally Canvas 插件

<link rel='stylesheet' href='colorpicker.css' />
<link rel='stylesheet' href='literally.css' />
<script src="jquery.1.8.2.min.js"></script>
<script src="underscore-min.js"></script>
<script src="literallycanvas.thin.min.js"></script>

然后添加要呈现的画图组件

<div class="literally"><canvas></canvas></div>

最后初始化就可以了

$('.literally').literallycanvas({
backgroundColor: 'rgb(255, 0, 0)', // 默认是 rgb(230, 230, 230)
keyboardShortcuts: false, // 默认是 true
imageURLPrefix: 'img', // 组件所用图标所在目录
sizeToContainer: false, // 默认是 true
toolClasses: [LC.Pencil] // 可查看 coffee/tools.coffee
});

可使用下面的这个方法导出图片

$('.literally').canvasForExport().toDataURL();