canvas中2D画线详解

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

    手册的代码是这样的

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，

c.getContext('2d');

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

cxt.moveTo(10, 10);

    

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

    4，

cxt.lineTo(150, 50);

    (1)添加一条直线，起点是第3步设置的(10, 10)，终点现在设置的(150, 50)！    这有两个功能：

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

    5，

cxt,lineTo(10, 50);

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

    6,

cxt.stroke();

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