用js简单的画个圆

JavaScript018

用js简单的画个圆,第1张

var c=document.getElementById("myCanvas")

var cxt=c.getContext("2d")

cxt.fillStyle="#FF0000"

cxt.beginPath()

cxt.arc(70,18,15,0,Math.PI*2,true)

cxt.closePath()

cxt.fill()

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轴坐标。

<!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>