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

目录

直线路径 API 方法

绘制路径编码示例

canvas fillText() 填充文本

---

直线路径 API 方法

beginPath() 方法

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

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

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

JavaScript 语法：context.beginPath()；

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

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

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

绘制路径编码示例

    
    
    

    

    
    
    



    Your browser does not support the HTML5 canvas tag.



起点：左右

线数：34


运行

canvas fillText() 方法绘制文本

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

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

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

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

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

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

    
    
    
    

    
    
    




    浏览器不支持 Canvas



    浏览器不支持 Canvas