一、基本介绍

function circle(x, y, r) { 
    // 绘制圆形 
}

在绘图中，圆是一个基本的图形，circle函数是一个专门用于绘制圆形的函数。它接受三个参数，分别是圆心的坐标x和y，以及圆的半径r。

circle函数使用的是笛卡尔坐标系，x轴向右为正，y轴向下为正。圆心坐标为(x,y)，半径为r。

调用circle函数能够绘制一个圆形，并在画布上显示。

二、绘制样式

function circle(x, y, r) { 
    // 绘制圆形 
    context.beginPath();
    context.arc(x, y, r, 0, 2*Math.PI);  
    // 设置样式
    context.fillStyle = "#0080FF";
    context.strokeStyle = "#0080FF";
    context.lineWidth = 2;
    context.fill();
    context.stroke();
}

通过调用circle函数绘制的圆形可以设置各种样式，如填充色、描边粗细等。在绘制圆形之前，需要使用beginPath()方法声明开始路径，然后调用arc()方法绘制圆形。

设置颜色可以使用fillStyle和strokeStyle属性，分别表示填充色和描边色。设置描边粗细可以使用lineWidth属性。

最后，使用fill()方法填充圆形内部，使用stroke()方法绘制描边。

三、绘制圆弧

function arc(x, y, radius, startAngle, endAngle, anticlockwise) {
    // 绘制圆弧
}

除了绘制整个圆形之外，也可以通过arc函数绘制圆弧。

arc函数接受六个参数，分别是圆心的坐标x和y，半径radius，开始角度startAngle和结束角度endAngle，以及一个布尔值anticlockwise，表示绘制方向是否为逆时针。

在绘制圆弧之前同样需要使用beginPath()方法声明开始路径，然后调用arc()方法绘制圆弧。设置颜色和描边方式同样可以使用fillStyle、strokeStyle和lineWidth属性。

四、实例应用

function drawTarget(x, y, step) { 
    for (var i = 0; i < 5; i++) {
        var radius = (5-i)*step;
        if (i%2 == 0) {
            context.fillStyle = "#fff";
        }else {
            context.fillStyle = "#D72713";
        }
        context.beginPath();
        context.arc(x, y, radius, 0, Math.PI*2, true);
        context.fill();
    }   
}

circle函数可以应用于各种实际场景中，如绘制靶心。下面的示例代码展示了如何使用circle函数绘制一个靶心。

在drawTarget函数中，通过循环调用circle函数绘制了五个圆形，依次缩小半径。通过填充和描边不同的颜色，实现了靶心的效果。

五、总结

circle函数是一个非常有用的绘图函数，可实现绘制圆形和圆弧的功能。可以通过设置样式和应用实例，充分发挥circle函数的功能和灵活性。