d3.js画圆弧和圆的坐标、弧长计算方法

JavaScript09

d3.js画圆弧和圆的坐标、弧长计算方法,第1张

svg路径画圆的特性:(rx ry x-axis-rotation large-arc-flag sweep-flag x y)。

rx,ry: 是椭圆的两个半轴的长度。

x-axis-rotation: 是椭圆相对于坐标系的旋转角度,角度数而非弧度数。

large-arc-flag: 是标记绘制大弧(1)还是小弧(0)部分。

sweep-flag: 是标记向顺时针(1)还是逆时针(0)方向绘制。

x,y: 是圆弧终点的坐标。

已知两点和半径求弧路径。

已知圆上两点和半径求弧长。

已知圆上的y轴半径和圆心求相交的x轴坐标。

已知圆上的x轴半径和圆心求y轴坐标。

var path = svgdoc.createElement("path")

path.setAttribute("d","M400 400 L400 300 A400 400 90 0 1 500 400 Z")

path.setAttribute("style","fill:nonestroke:#00fstroke-width:2")

svgdoc.rootElement.appendChild(path)

这个代码是画四分之一个圆,圆环你自己算下坐标,用PATH画,A是画弧线的

path的相关知识,你百度你里面看下,这里就不多说了

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>画圆</title>

<script src="http://apps.bdimg.com/libs/raphael/2.1.2/raphael-min.js"></script>

</head>

<body>

<div id="holder"></div>

<script>

var paper = Raphael( "holder", 400, 400 )

var circle = paper.circle(200, 200, 150)  // 从200,200 开始画一个半径150的圆

circle.attr("fill", "#f00") //并用红色填充

</script>

</body>

</html>