literallycanvas.js是一款涂鸦画板插件-BFW插件库

literallycanvas.js是一款涂鸦画板插件

literallycanvas.js是一款涂鸦画板插件，它唯一的依赖是React.js。您可以使用它在网页中嵌入绘图板。它有点像 JavaScript 中的可扩展 MS Paint。用户可以绘制图纸，您可以对结果做任何您喜欢的事情。

使用方式：

第一步引入相关库

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/literallycanvas.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-0.13.0.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/literallycanvas.js"></script>

第二步准备dom元素

  <div id="lc"></div>

第三步配置参数

        var lc = LC.init(document.getElementById("lc"), {
            imageURLPrefix: '//repo.bfw.wiki/bfwrepo/css/images/literallycanvas',
            toolbarPosition: 'top',
            defaultStrokeWidth: 2,
            strokeWidths: [1, 2, 3, 5, 30]
        });

完整代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/literallycanvas.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-0.13.0.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/literallycanvas.js"></script>
</head>

<body>
    <div id="lc"></div>
    <script type="text/javascript">
        var lc = LC.init(document.getElementById("lc"), {
            imageURLPrefix: '//repo.bfw.wiki/bfwrepo/css/images/literallycanvas',
            toolbarPosition: 'top',
            defaultStrokeWidth: 2,
            strokeWidths: [1, 2, 3, 5, 30]
        });
    </script>
</body>

</html>

官网：http://literallycanvas.com/