美文网首页
Canvas基本图形-路径

Canvas基本图形-路径

作者: 张有宽 | 来源:发表于2016-10-22 12:34 被阅读37次

绘制路径

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

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

以下是要用到的函数:

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

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

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

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


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

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

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

相关文章

  • HTML之canvas

    参考文档 MDN w3schook canvas基本使用 canvas坐标系 绘图基本步骤 绘制图形 路径的概念 ...

  • Canvas基本图形-路径

    绘制路径 图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径,甚至一...

  • Canvas绘制类

    绘制类:canvas.drawXXX(基本信息,paint控制颜色、风格等) ,draw颜色、点线、图形、路径、图...

  • Canvas学习笔记--绘制路径

    参考 使用canvas来绘制图形 知识点 图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同...

  • canvas基本操作

    canvas基本操作 一、canvas简介 Canvas API主要聚焦于2D图形。由 标签定义图形,比如图表和...

  • canvas(二)绘制图形

    使用canvas 绘制图形 上一篇 canvas基本用法在学习了canvas基本用法 我们开始着手在 canvas...

  • canvas-绘制简单路径

    这一节,我们将了解关于canvas中如何绘制路径,并详细的介绍一下线的有关知识点 图形的基本元素是路径: 路径是通...

  • canvas-裁切clip()

    使用图形上下文不带参数的clip()方法来实现Canvas图形裁切功能,该方法会使用先创建好的路径对canvas设...

  • 安卓自定义View进阶-Canvas之画布操作

    上一篇Canvas之绘制基本图形中我们了解了如何使用Canvas绘制基本图形,本次了解一些基本的画布操作。 本来想...

  • (第四天)HTML5之Canvas图形绘制:图形、moveTo&

    Canvas图形绘制 API参考 开始创建路径ctx.beginPath(),通过此...

网友评论

      本文标题:Canvas基本图形-路径

      本文链接:https://www.haomeiwen.com/subject/qsiksttx.html