星空网 > 软件开发 > 网页设计

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”,或者扫描下方的二维码吧!

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

 


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

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




原标题:html5的canvas绘制线条,moveTo和lineTo详解

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

赚翻了!冰墩墩溢价30倍,冲上亚马逊热销榜第一!:https://www.kjdsnews.com/a/778444.html
虎年开工第一天,你急需了解的亚马逊大事件汇总!:https://www.kjdsnews.com/a/778445.html
跨境电商如何通过情人节营销?关键策略分享:https://www.kjdsnews.com/a/778446.html
Spartoo入驻条件及开店费用介绍:https://www.kjdsnews.com/a/778447.html
亚马逊卖家后台藏着这个选品工具,简直酷炸了:https://www.kjdsnews.com/a/778448.html
亚马逊断货后的补救措施:https://www.kjdsnews.com/a/778449.html
TikTok斥资210万美元游说美国参议院阻止法案通过 :https://www.goluckyvip.com/news/188220.html
北京飞机票查询(快速查询北京至各地机票价格和航班信息):https://www.vstour.cn/a/366178.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流