【刷脸付款代理】掌握绘制直线的相关方法和属性-北京神州易付公司

【刷脸付款代理】

2．绘制直线

(1) lineTo()方法

lineTo()方法用来绘制一条直线，语法格式为：

lineTo(x,y) {

x，y：直线终点的坐标。 i

说明：lineTo()方法为当前子路径添加一条直线，这条直线从当前点开始，到(x'y)结束。当方法返回时，当前点是(x，y)。

(2) moveTo()方法

在绘制直线时，通常配合moveTo()方法设置绘制直线的当前位置，并开始一条新的子路径，其语法格式为：

moveTo(x,y)

x，y：新的当前点的坐标。

说明：moveTo()方法将当前位置设置为(x，y)，并用它作为第一点创建一条新的子路径。如果之前有一条子路径并且它包含刚才的那一点，那么从路径中删除该子路径。

【案例5-9l绘制一条直线。

【案例展示】本例文件5-9.html在浏览器中的显示效果如图5-10所示。

【学习目标】掌握绘制直线的方法。

【知识要点】掌握绘制直线的相关方法和属性。

代码如下：

<! doctype html>

<html>

<head>

<／head>

照舞嬲鲻键

静啼0∞鲁

jj一1+j…～一一

＼∑

}-J

图5-10页面的显示效果

<body>

您的浏览器不支持canvas元素．

<／canvas>

var c=document.getElementById(”myCanvas”)；／／获取画布对象

var cxt-c.getContext(”2d”)；／／获取画布上绘图的环境

cxt.moveTo(10，10); ／／定位绘图起点

cxt.strokeStyle=”#OOOOff"; ／／设置线条颜色

cxt．lineWidth=”2”：／／设置线条宽度

cxt.lineTo(150，50); ／／第一条直线的终点坐标

cxt．lineTo(10，50); ／／第二条直线的终点坐标

cxt.stroke(); ／／绘制当前路径的边框

<／script>

</body>

</html>