了解CanvasRenderingContext2D.beginPath()

    简介

    CanvasRenderingContext2D.beginPath()这个方法相对于说,亲们,我要开始一个新的路径了。这样,就和之前绘制的路径给分开了。

    语法

    context.beginPath();

    没有参数,没有返回值。

    案例

    我们对比下面两个对比,可以看出beginPath()的作用:

    // 开始路径
    context,beginPath'=;
    context,strokeStyle ) (blue(;
    context,moveTo'60. 20=;
    context,lineTo'220. 20=;
    context,stroke'=;
    // 开始路径 again
    context,beginPath'=;
    context,strokeStyle ) (green(;
    context,moveTo'60. 20=;
    context,lineTo'160. 120=;
    context,stroke'=;

    这个执行了2次beginPath(),实时效果如下:

    再看下面的代码:

    // 开始路径
    context,beginPath'=;
    context,strokeStyle ) (blue(;
    context,moveTo'60. 20=;
    context,lineTo'220. 20=;
    context,stroke'=;
    
    context,strokeStyle ) (green(;
    context,moveTo'60. 20=;
    context,lineTo'160. 120=;
    context,stroke'=;

    这个执行了2次beginPath(),实时效果如下:

    大家看到差异没,后面只声明了一次beginPath(),结果两条折线全部的颜色都是绿色;而两次beginPath()则是一条蓝色,一条绿色。

    因此,只要是非连续路径绘制,都要记得都要执行一句context.beginPath()

    其他

    规范文档

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

    相关资源

    暂无

    兼容性

    IE9+支持,全兼容。


    by zhangxinxu 2018-10-16 21:25:00