了解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 2019-10-18 01:44:03

     返回顶部