概念：

面向对象的方法主要是把事物给对象化，包括其属性和行为。面向对象编程更贴近实际生活的思想。总体来说面向对象的底层还是面向过程，面向过程抽象成类，然后封装，方便使用就是面向对象（万物皆对象）。

绘制圆

构造函数（将圆心位置、半径、缩放比例等参数都封装进去）

  //构造函数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="data:images/1.png";image.onload=function(){draw();}

效果如下：

还有其他图形就没写了，基本类似！

觉得有用的话就给个赞吧，谢谢！

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

html5 canvas绘制圆形进度实例
2019独角兽企业重金招聘Python工程师标准>>> html5 canvas绘制圆形进度实例 <canvas id="test" width=200 h ...
html5 canvas绘制圆形印章，以及与页面交互
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 < ...
html5 canvas绘制图形,html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
html5 Canvas 绘制基本图形从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
html5: Canvas 绘制基本图形从绘制直线到路径 Jack Lee 的 CSDN 博客邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.n ...
java canvas 画图片_[Java教程][HTML5] Canvas绘制简单图片
[Java教程][HTML5] Canvas绘制简单图片 0 2016-05-13 13:00:04 获取Image对象,new出来定义Image对象的src属性,参数:图片路径定义Image对象 ...
html页面画一个矩形,使用HTML5 canvas绘制一个矩形的方法
使用HTML5 canvas绘制一个矩形的方法发布时间:2020-08-29 11:23:12 来源:亿速云阅读:102 作者:小新这篇文章将为大家详细讲解有关使用HTML5 canvas绘制一 ...
html canvas图片上绘制文字,如何用HTML5 CANVAS绘制文字
您可能感兴趣的话题: 绘制文字核心提示:如何在HTML5 canvas上绘制绘制文字,并且可以设置文字的字体,大小和颜色. 我们可以在HTML5 canvas上绘制绘制文字,并且可以设置文字的字体, ...
如何在html5中实现多圆,JavaScript与html5如何实现canvas绘制圆形图案的方法介绍
这篇文章主要介绍了js+html5实现canvas绘制圆形图案的方法,涉及html5图形绘制的基础技巧,需要的朋友可以参考下本文实例讲述了js+html5实现canvas绘制圆形图案的方法.分享给大 ...
在html画一个自动缩放圆环,使用html5 canvas绘制圆环动效
最近笔者有个需求,需求内容为:一组文字显示在圆环的周围,用户可添加文字,文字围绕着圆环,每个词对应圆环周围的的蓝色小圆点,当用户鼠标放在圆环上方小蓝点时时,实现放射出三角形,再显示出文字,先看看动图效 ...

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

概念：

绘制圆

构造函数（将圆心位置、半径、缩放比例等参数都封装进去）

在原型上写一个绘制函数（render）

绘制

效果如下：

绘制多个圆

效果如图

做动画也很方便

效果如下

绘制方形

构造函数

调用示例

效果

绘制线段

构造函数

调用实例

效果

绘制图片

构造函数

绘制实例

效果如下：

觉得有用的话就给个赞吧，谢谢！

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

最新文章

热门文章