canvas元素示例2

function draw(id) 
{  
    var canvas = document.getElementById(id);   //取得canvas的对象
    if (canvas == null)  
        return false;  
    var context = canvas.getContext('2d');   //获取画布对象
    context.fillStyle = "#EEEEFF";  //对画布填充颜色
     //参数===>x: 矩形左上角的 x 坐标  y:    矩形左上角的 y 坐标，width：  矩形的宽度，以像素计 ,height： 矩形的高度，以像素计
    context.fillRect(0, 0, 400, 300);  //fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。
    var n = 0; 
    for(var i = 0; i < 10; i++) 
    {  
        /*
        beginPath() 方法开始一条路径，或重置当前的路径。
        提示：请使用这些方法来创建路径：moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 以及 arc()。
        提示：请使用 stroke() 方法在画布上绘制确切的路径。
        */
        context.beginPath();  
        /*
        arc() 方法创建弧/曲线（用于创建圆或部分圆）。
        x   圆的中心的 x 坐标。
        y   圆的中心的 y 坐标。
        r   圆的半径。
        sAngle  起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
        eAngle  结束角，以弧度计。
        counterclockwise    可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
        提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。
         */
        context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
        /*
        
        closePath() 方法创建从当前点到开始点的路径。
        提示：请使用 stroke() 方法在画布上绘制确切的路径。
        提示：请使用 fill() 方法来填充图像（默认是黑色）。请使用 fillStyle 属性来填充另一个颜色/渐变。
         */  
        context.closePath();  
        context.fillStyle = 'rgba(255, 0, 0, 0.25)';  //为将要画的图像设置颜色
        /*
        fill() 方法填充当前的图像（路径）。默认颜色是黑色。
        提示：请使用 fillStyle 属性来填充另一种颜色/渐变。
        注释：如果路径未关闭，那么 fill() 方法会从路径结束点到开始点之间添加一条线，以关闭该路径，然后填充该路径。
         */
        context.fill();  
    }     
}

我的个人网站：canvas元素示例2