前端canvas画圆,canvas画一个圆

前言

　　画布是HTML5出来的绘图应用程序接口容器，对于图形的处理非常强大，下面使用帆布配合Java脚本语言来做一下动态画圆效果。可以用它来做圆形进度条来使用。

　　这里我个人总结了3种实现方法，大家可以参考一下。

方法一：arc()实现画圆

　　代码：

　　！DOCTYPE html html head meta charset= UTF-8 style type= text/CSS # my canvas { margin:0 auto；显示：块；}/style/head body canvas id=我的画布当前浏览器不支持帆布组件请升级！/canvas script type= text/JavaScript //方法一：弧形动态画圆var c=文档。getelementbyid(我的画布)；var CTX=c .获取上下文( 2d )；var mW=c . width=300 var mH=c . height=300 var线宽=5;var r=mW/2；//中间位置var cR=r - 4 *线宽；//圆半径var startAngle=-(1/2 *数学.)；//开始角度var endAngle=startAngle 2 * Math .PI；//结束角度var xAngle=1 *(数学./180)；//偏移角度量var fontSize=35//字号大小var tmpAngle=startAngle//临时角度变量//渲染函数var rander=function(){ if(tmp angle=endAngle){ return；} else if(tmp angle x angle endAngle){ tmp angle=endAngle；} else { tmp angle=x angle } CTX . clear rect(0，0，mW，mH)；//画圈CTX。begin path()；ctx .线宽=线宽；CTX。笔画样式= # 1c 86d 1ctx.arc(r，r，cR，startAngle，tmp角度)；CTX。笔画()；CTX。关闭路径()；//写字CTX。填充样式= # 1d 89 D5 ；ctx.font=fontSize px微软雅黑；ctx.textAlign= centerCTX。填充文本(数学。round((tmp angle-startAngle)/(endAngle-startAngle)* 100) % ，r，r font size/2)；requestAnimationFrame(rander)；};rander()；/脚本/正文/html思路：

　　通过设置的开始角度和结束角度来做限定，然后通过累加临时的角度变量实现动画效果。

　　相关函数：

　　上下文. arc(x，y，r，桑乐，一个角度，逆时针);

方法二：rotate() 动态画圆

　　代码：

　　！DOCTYPE html html head meta charset= UTF-8 style type= text/CSS # my canvas { margin:0 auto；显示：块；}/style/head body canvas id=我的画布当前浏览器不支持帆布组件请升级！/canvas script type= text/JavaScript //方法二：旋转()动态画圆var c=文档。getelementbyid(我的画布)；var CTX=c .获取上下文( 2d )；var mW=c . width=300 var mH=c . height=300 var线宽=5;var r=mW/2；//中间位置var cR=r - 4 *线宽；//圆半径var startAngle=-(1/2 *数学.)；//开始角度var endAngle=startAngle 2 * Math .PI；//结束角度var xAngle=1 *(数学./180)；//偏移角度量var fontSize=35//字号大小var tmpAngle=startAngle//临时角度变量//渲染函数var rander=function(){ if(tmp angle=endAngle){ return；} else if(tmp angle x angle endAngle){ tmp angle=endAngle；} else { tmp angle=x angle } CTX . clear rect(0，0，mW，mH)；//画圈CTX。save()；CTX。begin path()；ctx .线宽=线宽；CTX。笔画样式= # 1c 86d 1ctx.translate(r，r)；//重定义圆点ctx.rotate .PI)；//最上方为起点for(var I=0；I=tmp角度-start angle；i=xAngle){ //绘图ctx.moveTo(0，cR -线宽);ctx.lineTo(0，cR)；CTX。旋转(x角度)；//通过旋转角度和画点的方式绘制圆} ctx.stroke().CTX。关闭路径()；CTX。restore()；//写字CTX。填充样式= # 1d 89 D5 ；ctx.font=fontSize px微软雅黑；ctx.textAlign= centerCTX。填充文本(数学。round((tmp angle-startAngle)/(endAngle-startAngle)* 100) % ，r，r font size/2)；requestAnimationFrame(rander)；};rander()；/脚本/正文/html思路：

　　通过重新定义圆点坐标为(0,0),然后通过在规定范围内旋转图形，进行单点绘制。

　　相关函数：

　　context.translate(x，y)；

　　上下文.旋转(角度);

方法三：获取圆坐标方式 动态画圆

　　代码：

　　！DOCTYPE html html head meta charset= UTF-8 style type= text/CSS # my canvas { margin:0 auto；显示：块；}/style/headbdy canvas ID= my canvas 当前浏览器不支持画布组件。请升级！/canvas script type= text/JavaScript //方法三：通过获取圆坐标var c=document.getelementbyid(我的画布)动态画圆；var CTX=c . get context( 2d )；var mW=c.width=300var mH=c.height=300var线宽=5；var r=mW/2；//中间位置var cR=r-4 *线宽；//圆半径var startAngle=-(1/2 *数学。PI)；//起始角度varendangle=startangle 2 * math . pi；//结束角度var xAngle=2 *(数学。PI/180)；//偏移角度var cArr=[]；//圆坐标数组//初始化圆坐标数组for(var I=start angle；i=endAngleI=xAngle){ //通过sin()和cos () var x=r cR * Math.cos(i)得到每个角度的坐标；var y=r cR * math . sin(I)；cArr.push([x，y])；}//移动到起点var start point=carr . shift()；CTX . begin path()；ctx.moveTo(startPoint[0]，start point[1])；//渲染函数var rander=function(){//circle if(carr . length){ CTX . line width=line width；CTX . stroke style= # 1c 86d 1 ；var tmpPoint=carr . shift()；ctx.lineTo(tmpPoint[0]，tmp point[1])；CTX . stroke()；} else { cArr=null返回；} requestAnimationFrame(rander)；};rander()；/脚本/正文/html思路：

　　由sin()和cos()按照一定的角度偏移量，将起始角度和结束角度之间的坐标位置存储在数组中，然后根据数组中的坐标点进行绘制。

　　关于坐标点的计算，设计了一些数学知识。在这里我做了一个说明图：

　　影响

后记

　　通过上面的绘制方法，稍加修改就可以制作一个进度条插件。

　　关于画布的三种动态圆绘制方法的描述(总结)本文到此为止。更多画布动态圆绘制的相关内容，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。