image2D基于 svg 和 canvas2D 提供的二维绘图接口-技术圈

基于 svg 和 canvas2D 提供更友好的二维绘图接口，包括常规的辅助方法！

概要

开发这个库的初衷是希望越来越多的人可以更自由的发挥自己的创意，感受绘图的乐趣，并把积累的经验分享出来，推动库本身的发展，从而不断优化！因此，这个库永远都是自由、开源、讨论和进步的。

我们欢迎任何人的加入，具体的内容你可以通过访问贡献指南来找到你可以参与的部分。任何时候，特别是遇到疑惑，联系作者都会是一个好主意。当然，提 issue 也是不错的，因为这样更方便大家交流！

起步

具体的使用说明请查看文档一节，这里为了方便介绍，你需要搭建一个基本的开发环境来跟着我们学习，很简单，

你可以通过CDN引入（请选择对应的版本），在代码中通过image2D或$$调用：

<script src="https://cdn.jsdelivr.net/npm/image2d@1.6.0/build/image2D.min.js"></script>

作为入门，我们这里只是简单的说明一下如何绘图，具体的辅助方法和一些细节在文档有进行说明，或者你可以提 issue 进行交流，为了简化，这里不再赘述。

获取画笔

绘图的第一步当然是获取画笔了，画笔分为两种：Canvas2D 和 SVG，我们来看看具体的代码：

var painter=$$('#painter').painter();

上面的$$('#painter')返回一个 image2D 对象，通过 ID 选择器查找结点，然后调用对象上的 painter 方法就可以获取画笔了。

如何判断画笔的类型？如果结点是 canvas 获取的就是 Canvas2D 画笔，如果结点是 svg 获取的就是 SVG 画笔。

配置

不管是什么画笔，都一样可以进行配置（当然有缺省值），比如画笔的粗细，颜色等，下面列出部分选项：

painter.config({

    "font-size":"文字大小",

    "lineWidth":"线条宽度",

    ......
});

具体的配置选项请查看画笔一节。

绘图方法

画笔获取并配置好了以后，直接调用画笔上的方法即可绘图，我们拿canvas举例子。

$$('canvas')
.attr({
    "with":200,
    "height":100
})
.painter()
.config({
    "lineWidth":10,
    "fillStyle":"red",
    "strokeStyle":"green"
})
.fillArc(100, 0, 50, 100, 0, Math.PI)
.strokeArc(100, 0, 50, 95, 0, Math.PI);

具体的绘图方法也请查看文档一节中关于画笔的部分。

看看运行后的效果：

怎么样？是不是很简单，虽然直接使用 canvas 或 svg 也可以实现，不过借助这个库绘图会更简单，你可以把更多的精力放在绘制出更有趣的作品上（如果借助本库开发了有趣的作品，可以联系我们，和大家一起分享）。

最后，祝你好运！

下一步

请务必查看这个文档。在这里，你将找到所有的接口文档，包括一些必要的说明和重要的使用用例。这里还有一个方便的问题交流的部分，你可以把你使用的后的改进意见反馈给我们，或者在这里提出使用疑惑。