你的位置:首页 > 网页设计

[网页设计]html5的canvas绘制线条,moveTo和lineTo详解


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

 

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

 

    一、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();

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

实现的效果是这样的

 

    二、详细讲解每一个步骤

    1,获取id值为myCanvas的canvas标签并赋值给c!(指定在哪里画)

    2,

c.getContext('2d');

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

cxt.moveTo(10, 10);


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

指定义了一个起点,坐标是(20,20)!这时候的起点如下图

    4,

cxt.lineTo(150, 50);

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

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

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

    5,

cxt,lineTo(10, 50);

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

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

    6,

cxt.stroke();

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

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

 


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

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