【品牌网站建设解决方案】掌握绘制圆弧和圆的相关方法和属性 -网络营销推广_网站建设设计

【品牌网站建设解决方案】掌握绘制圆弧和圆的相关方法和属性

发表日期：2018-11-09 07:00:58

【品牌网站建设解决方案】

cxt.lineWidth=”2”：／／设置线条颜色

cxt.beginPath(); ／／设置线条宽度

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

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

cxt.lineTo(20，60); ／／第二条直线的终点坐标

cxt.closePath();／／封闭路径，使第一条直线的起点坐标与第二条直线的终点坐标闭合

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

<／script>

<／body>

<／html>

【案例说明】本例中使用beginPath()方法初始化路径，第一次使用moveTo()方法改变当前绘画位置到cs0，20)，接着使用两次lineTo()方法绘制三角形的两边，最后使用closePathO关l’羽路径形成三角形的第三边。

·81·

3．绘制圆弧或圆

arc()方法使用一个中心点和半径，为一个画布的当前子路径添加一条弧，语法格式为：

arc(x,y, radius, startAngle, endAngle, counterclockwise)

其中的参数含义如下。

x，y：描述弧的圆形的圆心坐标。

radius:描述弧的圆形的半径。

startAngle，endAngle：沿着圆指定弧的开始点和结束点的一个角度。这个角度用弧度来量，沿着x轴正半轴的三点钟方向的角度为0，角度沿着逆时针方向而增大。 i

counterclockwise：弧沿着圆周的逆时针方向(True)还是顺时针方向(False)遍历。

说明：这个方法的前5个参数指定了圆周的一个起始点和一个结束点。调用这个方法会在当前点和当前子路径的起始点之间添加一条直线。接下来，它沿着圆周在子路径的起始点和结束点之间添加弧。最后一个counterclockwise参数指定了圆应该沿着哪个方向遍历来连接起始点和结束点。

【案例5-11l绘制圆弧和圆。

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

【学习目标】掌握绘制圆弧和圆的方法。

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

400-611-0508

全方位的营销咨询
精准的解决方案
一对一贴心服务