<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <canvas id = "Mycanvas" width="300" height="300" style="border:2px solid red;"></canvas> <script type="text/jscript"> var canvas = document.getElementById("Mycanvas"); var context = canvas.getContext("2d"); var x = 100; var y = 100; var a = 50; var b = 30 //选择a、b中的较大者作为arc方法的半径参数 var r = (a > b) ? a : b; var ratioX = a / r; //横轴缩放比率 var ratioY = b / r; //纵轴缩放比率 context.scale(ratioX, ratioY); //进行缩放（均匀压缩） context.beginPath(); //从椭圆的左端点开始逆时针绘制 context.arc(x , y , r, 0, 2 * Math.PI); context.fillStyle="#E2C1A7"; context.fill(); context.stroke(); </script> </body> </html>
效果图：
原文：http://www.cnblogs.com/wangmingxia/p/5647334.html