html5的canvas绘制线条，moveTo和lineTo详解

今天在看html5，里面新增的属性有一个canvas，它相当于一个画布你可以用js在里面画你想要的效果！我在w3c的手册里面看到用moveTo和lineTo绘制线条讲的不是很清楚，尤其是moveTo和lineTo函数没有说的很明白！所以特地在这里与新手朋友分享一下我的理解！

    一、w3c里面的代码和实现效果

    手册的代码是这样的

1

2

3

4

5

6

var c = document.getElementById('myCanvas');

var cxt = c.getContext("2d");

cxt.moveTo(10, 10);

cxt.lineTo(150,50);

cxt.lineTo(10,50);

cxt.stroke();

    实现的效果是这样的

    二、详细讲解每一个步骤

    1，获取id值为myCanvas的canvas标签并赋值给c！（指定在哪里画）

    2，

1

c.getContext('2d');

    手册上说是返回一个用于在画布上绘图的环境，2d表示二维绘图！（指定画出的图案的类型）

    3,

1

cxt.moveTo(10, 10);

    指定义了一个起点，坐标是（20,20）！这时候的起点如下图

    4，

1

cxt.lineTo(150, 50);

    这有两个功能：

    (1)添加一条直线，起点是第3步设置的(10, 10)，终点现在设置的(150, 50)！

    (2)设置新的起点为(150, 50)，相当于又来了一句cxt.moveTo(150, 50);而这时候的起点如下图

    5，

1

cxt,lineTo(10, 50);

    跟上一条语句功能相同，这时候起点如下图

    

    6,

1

cxt.stroke();

    上面做了那么多的事情但始终没有在网页上面画出了，而这个语句就是将你以上所有做的事都在网页上面呈现出来！所以如果你要测试线条或者图案效果的话，一定不要忘了这一句，不然网页上面是什么都显示不出啦的！

想要每天及时获取王业楼的个人博客更新的内容吗？赶快添加微信公众号“ly89cn”，或者扫描下方的二维码吧！

本文来源于王业楼的个人博客，本文地址：http://www.ly89.cn/detailB/60.html

欢迎分享本文，转载请注明本文出处和地址