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