Canvas beginPath()、moveTo()、 lineTo() 、stroke() 绘制直线路径，fillText() 绘制填色的文本

浅浅的花香味﹌ 2022-04-08 08:45 310阅读 0赞

**目录**

直线路径 API 方法

绘制路径编码示例

canvas fillText() 填充文本

--------------------

# 直线路径 API 方法 #

**beginPath() 方法**

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

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

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

JavaScript 语法：context.beginPath()；

w3c 参考例子：[http://www.w3school.com.cn/tags/canvas\_beginpath.asp][http_www.w3school.com.cn_tags_canvas_beginpath.asp]

注意：canvas 的 width 与 height 属性的值不能带单位，如 100px、100% 都是错误的，只能是纯数字，单位默认为 px。

**moveTo() 方法**

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

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

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

<table> 
 <tbody> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><em>x</em></td> 
   <td>路径的目标位置的 x 坐标。</td> 
  </tr> 
  <tr> 
   <td><em>y</em></td> 
   <td>路径的目标位置的 y 坐标。</td> 
  </tr> 
 </tbody> 
</table>

w3c 参考例子：[http://www.w3school.com.cn/tags/canvas\_moveto.asp][http_www.w3school.com.cn_tags_canvas_moveto.asp]

**lineTo() 方法**

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

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

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

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

**stroke() 方法**

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

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

JavaScript 语法：context.stroke();

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

# 绘制路径编码示例 #

![20181207141454144.gif][]

<!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>
    
        
        <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 fillText() 方法绘制文本 #

fillText() 方法在画布上绘制填色的文本，文本默认颜色是黑色。

提示：使用 [font][] 属性来定义字体和字号，并使用 [fillStyle][] 属性以另一种颜色/渐变来渲染文本。

JavaScript 语法：context.fillText(*text*,*x*,*y*,*maxWidth*);

<table> 
 <tbody> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><em>text</em></td> 
   <td>规定在画布上输出的文本。</td> 
  </tr> 
  <tr> 
   <td><em>x</em></td> 
   <td>开始绘制文本的 x 坐标位置（相对于画布）。</td> 
  </tr> 
  <tr> 
   <td><em>y</em></td> 
   <td>开始绘制文本的 y 坐标位置（相对于画布）。</td> 
  </tr> 
  <tr> 
   <td><em>maxWidth</em></td> 
   <td>可选。允许的最大文本宽度，以像素计。</td> 
  </tr> 
 </tbody> 
</table>

Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。

注意：canvas 的 width 与 height 属性的值不能带单位，如 100px、100% 都是错误的，只能是纯数字，单位默认为 px。

![2018112016051447.gif][]

<!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>Canvas 文本</title>
        <style type="text/css">
            .canvasDiv {
                width: 490px;
                height: 150px;
                background-color: #999999;
                display: inline-block;
                margin-left: 20px;
            }
        </style>
    
        
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="module">
    
            /**
             * 绘制文本
             */
            let fillText1 = function () {
                /**
                 * 获取画布,同时为画布设置宽高等于父容器的宽高
                 * 获取父容器尺寸这里用的是 JQuery 的方法获取，它获取的值是不带单位的
                 * @type {Element}
                 */
                let canvas = document.getElementById("myCanvas1");
                canvas.width = $(canvas).parent().width();
                canvas.height = $(canvas).parent().height();
    
                /**获取画布上下文环境*/
    
                let ctx = canvas.getContext("2d");
                /**
                 * fillStyle：设置或返回用于填充绘画的颜色、渐变或模式
                 * font：设置或返回画布上文本内容的当前字体属性，如下所示 字号 字体
                 * @type {CanvasGradient}
                 */
                ctx.font = "30px Verdana";
                ctx.fillStyle = "#fff";
    
                /**
                 * 相对画布开始绘制文本的 X 坐标为 0，即从最左侧开始
                 * 相对画布开始绘制文本的 Y 坐标为画布高度的一般，即从中间开始
                 * 最后如果绘制的文本过长，又想它全部显示出来，则设置允许的最大文本宽度，以像素计
                 * 默认如果没有限制，则超过的文本内容，不会显示出来
                 */
                ctx.fillText("2018 the Great Wall(万里长城)", 0, canvas.height / 2, canvas.width);
    
                /**下面没有添加内容最大长度限制时，当文本长度超过画布宽度时，超过的部分不会再显示*/
                /*ctx.fillText("2018 the Great Wall(万里长城)", 0, canvas.height / 2);*/
    
            }
    
            /**
             * 绘制文本----动画版
             * 只需要将一段文本，每次绘制的长度多一点就可以达到动画的效果
             * canvas、ctx 不需要每次都重复获取，所以作为参数传入即可
             * text：每次绘制的文本
             */
            let fillText2 = function (canvas, ctx, text) {
                /** 这里通过为画布设置尺寸，则画布每次会先清除掉原来的像素，重新进行绘制*/
                canvas.width = $(canvas).parent().width();
                canvas.height = $(canvas).parent().height();
    
                /**
                 * fillStyle：设置或返回用于填充绘画的颜色、渐变或模式
                 * font：设置或返回画布上文本内容的当前字体属性，如下所示 字号 字体
                 * @type {CanvasGradient}
                 */
                ctx.font = "30px Verdana";
                ctx.fillStyle = "#fff";
    
                /**
                 * 相对画布开始绘制文本的 X 坐标为 0，即从最左侧开始
                 * 相对画布开始绘制文本的 Y 坐标为画布高度的一般，即从中间开始
                 * 最后如果绘制的文本过长，又想它全部显示出来，则设置允许的最大文本宽度，以像素计,这里就是画布的宽度
                 * 默认如果没有限制，则超过的文本内容，不会显示出来
                 */
                ctx.fillText(text, 0, canvas.height / 2, canvas.width);
            }
    
            $(function () {
                fillText1();
    
                /**
                 * 获取画布,同时为画布设置宽高等于父容器的宽高
                 * 获取父容器尺寸这里用的是 JQuery 的方法获取，它获取的值是不带单位的
                 * @type {Element}
                 */
                let canvas = document.getElementById("myCanvas2");
                /**获取画布上下文环境*/
                let ctx = canvas.getContext("2d");
    
                let text = "2018 the Great Wall(万里长城)";
                let index = 1;
    
                /**
                 * 使用定时器，每隔 50 毫秒就绘制一次文本
                 * 每次绘制的文本都多一个字符
                 */
                setInterval(function () {
                    if (index <= text.length) {
                        fillText2(canvas, ctx, text.substring(0, index++));
                    } else {
                        index = 1;
                    }
                }, 50);
    
            });
        </script>
    
    </head>
    <body>
    <div class="canvasDiv">
        <canvas id="myCanvas1">浏览器不支持 Canvas</canvas>
    </div>
    
    <div class="canvasDiv">
        <canvas id="myCanvas2">浏览器不支持 Canvas</canvas>
    </div>
    
    </body>
    </html>

[stroke]: http://www.w3school.com.cn/tags/canvas_stroke.asp
[http_www.w3school.com.cn_tags_canvas_beginpath.asp]: http://www.w3school.com.cn/tags/canvas_beginpath.asp
[stroke 1]: http://www.runoob.com/tags/canvas-stroke.html
[http_www.w3school.com.cn_tags_canvas_moveto.asp]: http://www.w3school.com.cn/tags/canvas_moveto.asp
[http_www.runoob.com_tags_canvas-lineto.html]: http://www.runoob.com/tags/canvas-lineto.html
[strokeStyle]: http://www.runoob.com/tags/canvas-strokestyle.html
[20181207141454144.gif]: /images/20220407/0bf004aee8e64b7d9b1b92f7a0e93497.png
[font]: http://www.w3school.com.cn/tags/canvas_font.asp
[fillStyle]: http://www.w3school.com.cn/tags/canvas_fillstyle.asp
[2018112016051447.gif]: /images/20220407/36177f45064748089b7b66ee3f2e9473.png