html5-循环方式-绘制矩形

$(function(){
    var can = $("#can").get(0);　　　　　　
    var ctx = can.getContext("2d");
    
    for(i=0;i<10;i++){

        ctx.beginPath();//每次都将重置绘画位置；

        ctx.arc(15+i*15,15+i*15,30,0,Math.PI*(i+1/2),true);
　　　　
　　　　//以下是奇数和偶数区分    
        if(i%2==1){
            ctx.fill();    
        }else{
            ctx.stroke();    
        }
    }
})

 

将arc（）方法里面的参数，用循环的变量 i 来组合使用。

当需要绘制多个的时候，可以使用循环。

效果图：