Canvas基本图形-路径

绘制路径

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径,甚至一个子路径,都是闭合的。使用路径绘制图形需要一些额外的步骤。

  1. 首先,你需要创建路径的起始点
  2. 然后你要使用画图命令去画出路径
  3. 之后你需要把路径闭合
  4. 一旦路径生成,你就能通过描边或填充路径区域来渲染图形。

以下是要用到的函数:

beginPath()新建一条路径,生成之后,图形绘制命令被指向到路径上生成路径

closePath()闭合路径之后图形绘制命令又重新指向到上下文中

stroke()通过线条绘制图形轮廓

fill()通过填充路径内容区域生成实心图形


生成路径的第一步叫做beginPath()。本质上,路径是由很多子路径构成,这些子路径都是在一个列表中,所有的子路径(线、弧形、等等)构成图形。而每次这个方法调用之后,列表清空重置,然后我们就可以重新绘制新的图形。

第二步就是调用函数指定绘制路径,本文稍后我们就能看到了。

第三,就是闭合路径closePath(),不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的,即当前点为开始点,该函数什么也不做。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 使用canvas 绘制图形 上一篇 canvas基本用法在学习了canvas基本用法 我们开始着手在 canvas...
    闲不住的李先森阅读 1,109评论 0 0
  • 路径定义一个或多个形状或子路径。 子路径可以由直线,曲线或两者组成。 它可以打开或关闭。 子路径可以是简单的形状,...
    权宜平和阅读 877评论 0 1
  • 2017年初,我完成了自己的终身大事,感谢爸妈育我养我陪伴我。爸妈,谢谢你们为我操心,为我付出的一切。我会好好生活...
    素面淑颜阅读 202评论 0 1
  • 2017年10月29日复盘!! 接龙周期:10月29日12:00am~10月30日10:50am 学习归来,满腔热...
    珺珺927阅读 226评论 0 0
  • 曾经看刘同的《你的孤独,虽败犹荣》,才体会到原来每个人都是孤独的。我们独自行走,独自生活,甚至与自己谈心。有时,这...
    荼靡时光阅读 475评论 5 3