概念：
面向对象的方法主要是把事物给对象化，包括其属性和行为。面向对象编程更贴近实际生活的思想。总体来说面向对象的底层还是面向过程，面向过程抽象成类，然后封装，方便使用就是面向对象（万物皆对象）。
绘制圆
构造函数（将圆心位置、半径、缩放比例等参数都封装进去）
//构造函数function Ball(o){this.x=0,//圆心X坐标this.y=0,//圆心Y坐标this.r=0,//半径this.startAngle=0,//开始角度this.endAngle=0,//结束角度this.anticlockwise=false;//顺时针，逆时针方向指定this.stroke=false;//是否描边this.fill=false;//是否填充this.scaleX=1;//缩放X比例this.scaleY=1;//缩放Y比例this.init(o);}//初始化Ball.prototype.init=function(o){for(var key in o){this[key]=o[key];}}
在原型上写一个绘制函数（render）
//绘制Ball.prototype.render=function(context){var ctx=context;//获取上下文ctx.save();ctx.beginPath();ctx.translate(this.x,this.y);ctx.scale(this.scaleX,this.scaleY);//设定缩放ctx.arc(0,0,this.r,this.startAngle,this.endAngle);//画圆if(this.lineWidth){//线宽ctx.lineWidth=this.lineWidth;}if(this.fill){//是否填充this.fillStyle?(ctx.fillStyle=this.fillStyle):null;ctx.fill();}if(this.stroke){//是否描边this.strokeStyle?(ctx.strokeStyle=this.strokeStyle):null;ctx.stroke();}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);//绘制})
效果如图
做动画也很方便
比如（简单做个随机运动，要做定向运动其实也是一样的道理）
function reDraw(){ctx.clearRect(0,0,300,300);//清理画布//循环数组，一次性绘制renderArr.forEach(function(item){item.x=getRandom(40,260);//重新设置xitem.y=getRandom(40,260);//重新设置yitem.render(ctx);//绘制})}setInterval(reDraw,200);
效果如下
接下来要做其他的东西都可以通过类似这样的方式了，很方便
绘制方形
构造函数
function Rect(o){this.x=0,//x坐标this.y=0,//y坐标this.width=100,//宽this.height=40,//高this.thin=true,//线段薄一点this.init(o);}Rect.prototype.init=function(o){for(var key in o){this[key]=o[key];}}Rect.prototype.render=function(context){this.ctx=context;innerRender(this);function innerRender(obj){var ctx=obj.ctx;ctx.save()ctx.beginPath();ctx.translate(obj.x,obj.y);if(obj.lineWidth){ctx.lineWidth=obj.lineWidth;}if(obj.thin){ctx.translate(0.5,0.5);}ctx.rect(0,0,obj.width,obj.height);if(obj.fill){//是否填充obj.fillStyle?(ctx.fillStyle=obj.fillStyle):null;ctx.fill();}if(obj.stroke){//是否描边obj.strokeStyle?(ctx.strokeStyle=obj.strokeStyle):null;ctx.stroke();}ctx.restore();}return this;}
调用示例
var canvas = document.getElementById("canvas");canvas.width=300;canvas.height=300;var ctx = canvas.getContext("2d");var slider = new Rect({x:40,y:40,width:200,height:200,fill:true,fillStyle:'pink'})slider.render(ctx);
效果
绘制线段
构造函数
//直线的构造function Line(ctx,o){this.x=0,//x坐标this.y=0,//y坐标this.startX=0,//开始点x位置this.startY=0, //开始点y位置this.endX=0,//结束点x位置this.endY=0;//结束点y位置this.thin=false;//设置变细系数this.ctx=ctx;this.init(o);}Line.prototype.init=function(o){for(var key in o){this[key]=o[key];}}Line.prototype.render=function(){innerRender(this);function innerRender(obj){var ctx=obj.ctx;ctx.save()ctx.beginPath();ctx.translate(obj.x,obj.y);if(obj.thin){ctx.translate(0.5,0.5);}if(obj.lineWidth){//设定线宽ctx.lineWidth=obj.lineWidth;}if(obj.strokeStyle){ctx.strokeStyle=obj.strokeStyle;}//划线ctx.moveTo(obj.startX, obj.startY);ctx.lineTo(obj.endX, obj.endY);ctx.stroke();ctx.restore();}return this;}
调用实例
var canvas = document.getElementById("canvas");canvas.width=300;canvas.height=300;var ctx = canvas.getContext("2d");var line = new Line(ctx,{x:0,y:0,startX:10,startY:10,endX:200,endY:200,thin:true,strokeStyle:'orange'})line.render();
效果
绘制图片
构造函数
var canvas = document.getElementById("canvas");canvas.width=300;canvas.height=300;var ctx = canvas.getContext("2d");//图片对象ImageDraw构造函数function ImageDraw(o){this.id='',this.image=0,//图片对象（必填）this.sx=0,//图片切片开始x位置（显示整个图片的时候不需要填）this.sy=0,//图片切片开始y位置（显示整个图片的时候不需要填）this.sWidth=0, //图片切片开始宽度（显示整个图片的时候不需要填）this.sHeight=0,//图片切片开始高度（显示整个图片的时候不需要填）this.dx=0, //图片目标x位置（必填）this.dy=0, //图片目标y位置（必填）this.dWidth=0,//图片目标显示宽度（宽度不缩放时不必填）this.dHeight=0//图片目标高度高度（高度不缩放时不必填）this.init(o);}ImageDraw.prototype.init=function(o){for(var key in o){this[key]=o[key];}return this;}ImageDraw.prototype.render=function(context){draw(context,this);function draw(context,obj) {var ctx=context;ctx.save();if(!obj.image || getType(obj.dx)=='undefined' || getType(obj.dy)=='undefined'){throw new Error("绘制图片缺失参数");return;} ctx.translate(obj.dx,obj.dy);if(!getType(obj.sx)=='undefined' && getType(obj.sy)=='undefined' && obj.sWidth && obj.sHeight && obj.dWidth && obj.dHeight){//裁剪图片，显示时候有缩放ctx.drawImage(obj.image, obj.sx, obj.sy, obj.sWidth, obj.sHeight, 0, 0, obj.dWidth, obj.dHeight);}else if(obj.dWidth && obj.dHeight){ctx.drawImage(obj.image, 0, 0, obj.dWidth, obj.dHeight);//原始图片，显示时候有缩放}else{ctx.drawImage(obj.image,0, 0);//原始图片，显示时候无缩放}ctx.restore();}}var class2type={};"Boolean Number String Function Array Date RegExp Object".split(" ").forEach(function(name) {class2type[ "[object " + name + "]" ] = name;});function getType( obj ) {return obj == null ?String( obj ) :class2type[ Object.prototype.toString.call(obj) ] || "undefined";}
绘制实例
function draw(){var x=y=0,w=180,h=130;var img = new ImageDraw({image:image, dx:x, dy:y ,dWidth:w,dHeight:h});img.render(ctx);}var image = new Image();image.src="images/1.png";image.onload=function(){draw();}
效果如下：
还有其他图形就没写了，基本类似！
