写在后面

接下来，咱们将向大家阐明一些常见的图形如何绘制，外围的内容是编程思路的分享，不波及具体的绘图库。

在演示的时候和阐明的时候，尽管咱们抉择基于 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 的矩形。

残缺代码状况评论区【代码一】

计算方法

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

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