当前位置: 首页 > Web前端 > HTML

[0]常见图形绘制-写在前的演示

时间:2023-03-28 19:46:22 HTML

写在前面接下来,我们将向大家讲解如何绘制一些常见的图形。核心内容是编程思路的分享,不涉及具体的绘图库。在演示和讲解的时候,虽然我们选择了image2D.js作为依赖库,但是因为它简单的语法和原来的canvas或者普通人的认知几乎是一致的,所以我们觉得它还不错。选择。温馨提示:如果您有更好的建议,欢迎给我们留言哦~下面,我们就简单说明一下需要提前了解的知识。引入和获取画笔为了使用image2D,你可以选择通过npm或CDN导入。这里为了简单,我们直接使用CDN导入:接下来需要准备一张画布:抱歉,您的浏览器不支持画布!然后,使用以下语句获取画笔:varpainter=$$('canvas').painter();绘制方法完整的绘制方法请参考画笔上绘制方法中的说明。这里,我们选择绘制矩形的方法来给大家演示一下。这很简单:painter.fillRect(50,50,120,60);上面的语句会在(50,50)的位置绘制一个宽为120,高为60的矩形。完整代码情况评论区【代码1】计算方法的简单点击封装了一些画图可能用到的计算方法,明确的输入输出。具体计算方法请参考辅助计算中的说明,此处不再赘述。