web前端开发

您现在的位置是:首页>前端开发

HTML

【HTML5】canvas的路径

admin:杨小二时间:2020-09-11 19:19:12前端开发0次
路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径,甚至一个子路径,都是闭合的。利用路径绘制,我们可以绘制出任意图形。

路径

路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径,甚至一个子路径,都是闭合的。利用路径绘制,我们可以绘制出任意图形。

路径绘制的步骤:

  • 需要创建路径起始点。

  • 使用画图命令去画出路径。

  • 把路径封闭。

  • 一旦路径生成,就能通过描边或填充路径区域来渲染图形。

以下是所要用到的函数:
新建一条路径,生成之后,图形绘制命令被指向到路径上生成路径。

beginPath()

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

closePath()

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

通过线条来绘制图形轮廓。

stroke()

通过填充路径的内容区域生成实心的图形。

fill()

注意:当你调用fill()函数时,所有没有闭合的形状都会自动闭合,所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。

移动笔触

将笔触移动到指定的坐标x以及y上

moveTo(x,y) 

绘制一条从当前位置到指定x以及y位置的直线

lineTo(x,y) 

例子:

cxt.beginPath();
cxt.moveTo(150,150);
cxt.lineTo(150,250);
cxt.lineTo(300,250);
cxt.stroke();
cxt.closePath();

cxt.beginPath();
cxt.moveTo(400,400);
cxt.lineTo(400,500);
cxt.lineTo(500,500);
cxt.fill();

pointInPath()

pointInPath()方法用来判断一个点是否在当前路径上。如果在,则返回true。

平面设计