【0】常见图形绘制演示/写在前面

写在前面

接下来，我们将向大家说明一些常见的图形如何绘制，核心的内容是编程思路的分享，不涉及具体的绘图库。

在演示的时候和说明的时候，虽然我们选择基于image2D.js来作为依赖库，但由于其朴素的语法几乎和原生canvas或者说和普通人的认知是一致的，因此我们认为这不是一个糟糕的选择。

温馨提示：如果你有更好的建议，欢迎给我们留言~

下面，我们将简单的把需要提前了解的知识在下面进行说明。

引入并获取画笔

为了可以使用image2D，你可以选择npm或者CDN的方式引入，这里为了简单，我们直接使用CDN引入：

<script src="https://cdn.jsdelivr.net/npm/image2d@1"></script>

接着，你需要准备一个canvas：

<canvas>非常抱歉，您的浏览器不支持canvas!</canvas>

然后，使用下面的语句即可获取画笔：

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

绘制方法

完整的绘制方法请查看画笔上的绘图方法中的说明，这里，我们选择画矩形的方法给大家演示一下，非常的简单：

painter.fillRect(50,50,120,60);

上面的语句就会在(50,50)的位置绘制一个宽120高60的矩形。

完整代码情况评论区【代码一】

计算方法

说的简单的点击，就是封装了一些绘图中可能会用到的计算方法，确定的输入输出。

具体的计算方法请查看辅助计算中的说明，我们这里就不再说明了。