html5 canvas绘制圆形、方形矩形、线段、图片等各种图形（面向对象版本）

ctx.restore();

return this;

}

绘制

var canvas = document.getElementById(“canvas”);

canvas.width=300;

canvas.height=300;

var ctx = canvas.getContext(“2d”);

var ball1 = new Ball({

x:150,//圆心X坐标

y:150,//圆心X坐标

r:30,//半径

startAngle:0,//开始角度

endAngle:2*Math.PI,//结束角度

fill:true,//是否填充

fillStyle:‘green’//填充的样式

}).render(ctx);//直接render

效果如下：

绘制多个圆

很方便（定义一个数组来存取小圆对象，最后一次性调用render方法绘制）

var canvas = document.getElementById(“canvas”);

canvas.width=300;

canvas.height=300;

var ctx = canvas.getContext(“2d”);

var renderArr=[];

var ball,color ;

for(var i=0;i<10;i ){

color = ‘#’ Math.random().toString(16).substr(2, 6).toUpperCase();//随机颜色

ball = new Ball({

x:getRandom(40,260),//圆心X坐标

y:getRandom(40,260),//圆心X坐标

r:30,//半径

startAngle:0,//开始角度

endAngle:2*Math.PI,//结束角度

fill:true,//是否填充

fillStyle:color//填充的样式

});

renderArr.push(ball);//ball对象push到数组中

}

//循环数组，一次性绘制

renderArr.forEach(function(item){

item.render(ctx);//绘制

})

效果如图

做动画也很方便

比如（简单做个随机运动，要做定向运动其实也是一样的道理