beginPath() 方法

beginPath() 方法开始一条路径，或重置当前的路径。

提示：请使用这些方法来创建路径：moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 以及 arc()。

提示：请使用 stroke() 方法在画布上绘制确切的路径。

JavaScript 语法：context.beginPath()；

扫描二维码关注公众号，回复： 4413285 查看本文章

w3c 参考例子：http://www.w3school.com.cn/tags/canvas_beginpath.asp

moveTo() 方法

moveTo() 方法把路径移动到画布中的指定点，不创建线条。

提示：请使用 stroke() 方法在画布上绘制确切的路径。

JavaScript 语法：context.moveTo(x,y);

参数	描述
x	路径的目标位置的 x 坐标。
y	路径的目标位置的 y 坐标。

w3c 参考例子：http://www.w3school.com.cn/tags/canvas_moveto.asp

lineTo() 方法

lineTo() 方法添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）。

提示：请使用 stroke() 方法在画布上绘制确切的路径。

JavaScript 语法：context.lineTo(x,y);

参数	描述
x	路径的目标位置的 x 坐标。
y	路径的目标位置的 y 坐标。

菜鸟教程：http://www.runoob.com/tags/canvas-lineto.html

stroke() 方法

stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

提示：请使用 strokeStyle 属性来绘制另一种颜色/渐变。

JavaScript 语法：context.stroke();

菜鸟教程：http://www.runoob.com/tags/canvas-stroke.html

编码示例

极速梯子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title></title>

    <style type="text/css">
        #myCanvas {
            border-left: 1px solid #9A9990;
            border-right: 1px solid #9A9990;
        }
    </style>

    <!-- JQuery CDN-->
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">

        /**以下设置为全局变量
         * speed：速度，单位像素
         * singleWidth：单次运动线长，与画布等长
         * singleHeight：单次运动线高
         * lineNum：绘制的横线数目
         * time：帧动画请求id，用于停止动画
         */
        let speed = 3;
        let singleWidth = 300, singleHeight = 40;
        let lineNum;
        let time = 0;

        /**
         * 极速梯子动画
         * @param canvas ：画布
         * @param ctx ：画布上下文
         * @param currentWidth ：动画终端当前 x 坐标
         * @param currentHeight ：动画终端当前 y 坐标
         * @param flag ：0 表示向下，-1 表示向左，1 表示向右
         * @param index : 向下移动的次数，从 1 开始
         */
        let show = function (canvas, ctx, currentWidth, currentHeight, flag, index) {
            switch (flag) {
            /** 向左移动*/
                case -1:
                    if (currentWidth > 0) {
                        currentWidth -= speed;
                    } else {
                        flag = 0;
                    }
                    break;
            /**向下移动*/
                case 0:
                    if (currentHeight < index * singleHeight) {
                        currentHeight += speed;
                    } else {
                        /**如果当前绘制了3条横线，且一共只要绘制3条时，则继续往下绘制一根*/
                        if (index == 4 && lineNum == 3) {
                            flag = 0;
                        } else {
                            flag = currentWidth <= 0 ? 1 : -1;
                        }
                        index++;
                    }
                    /**如果运动到底部距离5像素，则停止动画*/
                    if (currentHeight >= canvas.height - 5) {
                        return;
                    }
                    break;
            /**向右移动*/
                case 1:
                    if (currentWidth < singleWidth) {
                        currentWidth += speed;
                    } else {
                        flag = 0;
                    }
                    break;
            }
            /**添加一个新点，然后在画布中创建从该点到最后指定点的线条（该方法并不会创建线条）
             * 最后绘制已定义的路径*/
            ctx.lineTo(currentWidth, currentHeight);
            ctx.stroke();

            /**开启帧动画回调*/
            time = requestAnimationFrame(function () {
                show(canvas, ctx, currentWidth, currentHeight, flag, index);
            });
        };

        $(function () {
            /**
             * 获取画布以及画布上下文对象
             * @type {Element}
             */
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");

            /**"运行"按钮点击事件*/
            $("button").click(function () {
                /**先停止原来的帧动画*/
                window.cancelAnimationFrame(time);

                /**情况画布内的所有旧像素点*/
                ctx.clearRect(0, 0, canvas.width, canvas.height);

                /**beginPath：开始一条路径，或重置当前的路径*/
                ctx.beginPath();
                /**
                 * lineWidth：设置或返回当前线条的宽度，以像素计。
                 * lineCap：属性设置或返回线条末端线帽的样式。round 表示圆角
                 */
                ctx.lineWidth = 10;
                ctx.lineCap = "round";

                /**获取用户参数值*/
                var start = $("input[name='start']:checked").val();
                lineNum = $("input[name='lineNum']:checked").val();

                /**初始化起点 x 坐标*/
                var initX = start == 1 ? 0 : 300;

                /**把路径移动到画布中的指定点，不创建线条，设置起点*/
                ctx.moveTo(initX, 0);
                /**调用方法实现动画*/
                show(canvas, ctx, initX, 0, 0, 1);
            });
        });
    </script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200">
    Your browser does not support the HTML5 canvas tag.
</canvas>
<br>
起点：<label><input type="radio" name="start" value="1" checked>左</label><label><input type="radio" name="start"
                                                                                    value="2">右</label><br>
线数：<label><input type="radio" name="lineNum" value="3" checked>3</label><label><input type="radio" name="lineNum"
                                                                                      value="4">4</label><br><br>
<button type="button">运行</button>
</body>
</html>

Canvas beginPath()、moveTo()、 lineTo() 、stroke() 绘制直线路径