目前使用canvas画布绘制椭圆形的方法有 ellipse()、 scale()、贝塞尔曲线以及 lineTo(),其中比较推荐 ellipse(),但是该方法尚未纳入标准,IE全系列浏览器都不支持,其它浏览器目前比较好。
如果想兼容IE浏览器,可以考虑使用 lineTo() 方法,但是如果要绘制的椭圆像素较大,会存在很大的效率问题,甚至浏览器崩溃,但是小又少的椭圆影响不大。
HTML代码
<canvas id="canvas"> 浏览器不支持Canvas </canvas>
javascript代码
var x = 400,
y = 400,
a = 400,
b = 200; //定义坐标与半径
var deg = 360 * Math.PI / 180;
var canvas = document.getElementById('canvas');
canvas.width = 800;
canvas.height = 800;
var cxt = canvas.getContext('2d');
cxt.lineWidth = '1';
cxt.strokeStyle = '#293742;';
cxt.setLineDash([15,5]);
cxt.beginPath();
cxt.moveTo(x+a, y);
var step = (a > b) ? 1 / b : 1 / a; // 每次绘制的路径,也可以自定义一个数值,如果数值偏大,绘制的路径是直线不是弧线。此处使用最长线除1
for(var i = 0; i<deg; i+=step){
cxt.lineTo(x + a*Math.cos(i), y + b*Math.sin(i));
}
cxt.stroke();
cxt.closePath();
上面的椭圆从右顺时针往左绘制,如果要从左往右,则把 x+a 改为 x-a 即可。
