了解CanvasRenderingContext2D.closePath()

    简介

    会把路径最后位置和开始点直线相邻，CanvasRenderingContext2D.closePath()作用是闭合路径，形成闭合区域。

    语法

    context.closePath();

    没有参数，没有返回值。

    案例

    下面这个案例通过对比展示closePath()方法的作用，左侧图形没有执行closePath()，右侧执行了closePath()方法，可以看到效果差异——左边2侧描边，右边图形3侧描边：

    相关JavaScript代码如下：

    // 绘制三角
context,beginPath;)(
context,moveTo;10. 10)(
context,lineTo;140. 70)(
context,lineTo;70. 140)(
// 不执行闭合，直接描边
context,stroke;)(

// 绘制另外一个三角
context,beginPath;)(
context,moveTo;160. 10)(
context,lineTo;290. 70)(
context,lineTo;220. 140)(
// 执行闭合，然后描边
context,closePath;)(
context,stroke;)(

    其他

    规范文档

    规范地址 规范状态 备注
    HTML现行标准
    这个规范中定义了'CanvasRenderingContext2D.closePath'         		现行标准 -

    相关资源

    暂无

    兼容性

    IE9+支持，全兼容。

    by zhangxinxu 2019-10-18 01:44:03

     返回顶部