HTML5中canvas元素，绘制圆形需要使用路径，开始时要取得图形上下文，首先使用路径来勾勒图形的轮廓，然后设置颜色，进行绘制。

<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<script>
    function draw(id) {
        var canvas = document.getElementById(id);
        if (canvas == null) return false;
        var context = canvas.getContext('2d');
        context.fillStyle = "#EEEEFF";
        context.fillRect(0, 0, 400, 300);
        var n = 0;
        for (var i = 0; i < 10; i++) {
            context.beginPath();
            context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
            context.closePath();
            context.fillStyle = 'rgba(255, 0, 0, 0.25)';
            context.fill();
        }
    }
</script>
</head>
<body onLoad="draw('canvas');">
<canvas id="canvas" width="400" height="300"/>
</body>
</html>

　　该方法共使用六个参数：

　　

context.beginPath();

　　该方法不使用参数，通过调用该方法，开始路径的绘制。在几次循环的创建路径的过程中，每次开始创建是都要调用beginPath函数。

context.arc(x,y,radius,startAngle,endAngle,anticlockwise)

　　该方法使用六个参数，x为绘制圆形的起点横坐标，y为绘制圆形图形的起点坐标，radius为绘制圆形半径，starAngle为开始角度，endAngle为结束角度，anticlockwise为是否按顺时针方向进行绘制。

　　arc方法不仅可以用来绘制圆形，也可以用来绘制圆弧。

context.closePath();

　　将路径关闭后，路径的创建工作就完成了，但还没有真正绘制任何图形。

　　context.fillStyle = 'rgba(255, 0, 0, 0.25)';
　　context.fill();

　　使用创建好的路径绘制图形。

　　Related posts: