HTML5运用canvas标签画椭圆

<!doctypehtml>

<html>

<head>

<title>画出一个椭圆</title>

</head>

<body>

<!--画出我的画布-->

<canvasid="can1"width="500px"height="500px"style="border:1pxsolid

black"></canvas>

<scripttype="text/javascript">

//获取画布

varcanvas=document.getElementById("can1");

//获取画笔

varcxt=canvas.getContext("2d");

cxt.beginPath();

//设置填充颜色

cxt.fillstyle="red";

vara=120;

varb=160;

varx=250;

vary=250;

//选择a、b中的较大者作为arc方法的半径参数

varr=(a>b)?a:b;

varratioX=a/r;//横轴缩放比率

varratioY=b/r;//纵轴缩放比率

cxt.scale(ratioX,ratioY);//进行缩放(均匀压缩)

//从椭圆的左端点开始逆时针绘制

cxt.moveTo((x+a)/ratioX,y/ratioY);

cxt.arc(x/ratioX,y/ratioY,r,0,2*Math.PI);

cxt.fill();

cxt.closePath();

</script>

</body>

</html>

相关推荐