canvas 两个圆相交重叠区域颜色填充_前端之canvas详解（二）——圆和矩形的画法...

一、用canvas画圆弧

用canvas画圆弧画圆弧有两种方法：

1、arc(x, y, r, startAngle, endAngle, anticlockwise): 以(x, y) 为圆心，以r 为半径，从 startAngle 弧度开始到endAngle弧度结束。anticlosewise 是布尔值，true 表示逆时针，false 表示顺时针(默认是顺时针)。

startAngle,endAngle是弧度，用角度时候如下所示(Math.PI / 180) * angle，angle换成角度即可。

arc(x0, y0, r1, (Math.PI / 180) * 35, (Math.PI / 180) * 145, false);

角度是以x轴正方向为0°，x轴负方向是180°，正好用canvas画了个图，现学现用。至于哪边是顺时针还是逆时针，看你的anticlockwise 参数了。

function draw(){var canvas = document.getElementById('canvas');   //  获取canvas标签   if (!canvas.getContext) return;var ctx = canvas.getContext('2d');     // 画的x轴    ctx.moveTo(60,150);      ctx.lineTo(240,150);      ctx.stroke();        // 画的y轴    ctx.moveTo(150,60);      ctx.lineTo(150,240);      ctx.stroke();      // 画的圆