canvas绘制多张图片,canvas实现画图
蜘蛛图的画法：
在开始之前，我们需要知道canvas是如何绘制图像的，canvas元素是用来在网页上绘制图形的。HTML5的canvas元素使用JavaScript在网页上绘制2D图像。在矩形区域的画布上，控制每个像素，JavaScript绘制2D图形，并逐像素渲染。使用画布元素绘制路径、矩形、圆形、字符和添加图像的方法有很多种。
*注意！Canvas标签本身没有画图功能，只能用JavaScript在网页上画图。
效果如下：
1.初始化js代码
//initialize(function(){ var canvas=document . createelement( canvas )；document . body . appendchild(canvas)；canvas.height=mHcanvas.width=mWmCtx=canvas . get context( 2d )；绘制多边形(mCtx)；//绘制多边形边的画线(mCtx)；//顶点连接drawText(mCtx)；//绘制文本draw region(mCtx)；//绘制数据draw circle(mCtx)；//画数据点})()；在上面的代码中，所有设置都通过一个立即执行函数进行初始化。画布正六边形的绘制方法请参考画布绘制正六边形。
在蜘蛛图中，我们可以将其拆分，分别画出一个六边形、一条直线和一个圆来完成单个组件，然后通过方法统一调用来绘制。
如下面的源代码所示：
！文档类型html html lang= en head meta charset= UTF-8 标题蜘蛛图canvas/title style type= text/CSS canvas { }/style/head by script type= text/JavaScript var mW=400；var mH=400var mData=[[法力, 77],[防御, 72],[生命值, 46],[物理伤害, 50],[回复值, 80],[耐力, 60]];var m count=mData.length//边数var mCenter=mW/2；//中心点var mRadius=mCenter-100；//半径（减去的值用于给绘制的文本留空间)var mAngle=Math .PI * 2/m计数；//角度var mCtx=nullvar mColorPolygon= # b8b 8 b 8//多边形颜色var mColorLines= # b8b 8//顶点连线颜色var mColorText= # 000000//初始化(函数(){ var canvas=document。createelement(“canvas”)；文档。身体。appendchild(画布)；canvas . height=MH canvas . width=mwm CTX=canvas。获取上下文(“2d”)；绘制多边形(mCtx)；拉丝(mCtx)；drawText(mCtx)；绘制区域(mCtx)；画圆(mCtx)；})();//绘制多边形边函数画多边形(CTX){ CTX。save()；//保存默认状态CTX . stroke style=mColorPolygonvar r=mRadius/m count；//单位半径//画6个圈for(var I=0；CTX。begin path()；//开始路径var currR=r *(I 1)；//当前半径//画6条边for(var j=0；j mCountj){ var x=mCenter currR * math。cos(mAngle * j)；var y=mCenter currR * math。sin(mAngle * j)；console.log(x: x， y: y)；ctx.lineTo(x，y)；} CTX。关闭路径()；//闭合路径CTX。笔画()；} CTX。restore()；//恢复到默认状态} //顶点连线函数拉线(CTX){ CTX。save()；CTX。begin path()；CTX . stroke style=mColorLinesfor(var I=0；I m counti){ var x=m center mRadius * math。cos(mAngle * I)；var y=mCenter mRadius * math。罪(mAngle * I)；ctx.moveTo(mCenter，mCenter)；ctx.lineTo(x，y)；} ctx.stroke().CTX。restore()；} //绘制文本函数drawText(CTX){ CTX。save()；var font size=MC center/12；ctx.font=fontSize px微软雅黑；CTX . fill style=mColorTextfor(var I=0；I m counti){ var x=m center mRadius * math。cos(mAngle * I)；var y=mCenter mRadius * math。罪(mAngle * I)；if( mAngle * i=0 mAngle * i=Math .PI/2 ){ ctx.fillText(mData[i][0]，x，y fontSize)；}else if(mAngle * i Math .PI/2 mAngle * i=Math .PI){ ctx.fillText(mData[i][0]，x - ctx.measureText(mData[i][0]).宽度，y fontSize)；}else if(mAngle * i Math .PI mAngle * i=数学* 3/2){ CTX。填充文本(mData[I][0]，x - ctx.measureText(mData[i][0]).宽度，y)；}else{ ctx.fillText(mData[i][0]，x，y)；} } CTX。restore()；} //绘制数据区域函数绘制区域(CTX){ CTX。save()；CTX。begin path()；for(var I=0；I m counti){ var x=m center mRadius * math。cos(mAngle * I)* mData[I][1]/100；var y=mCenter mRadius * math。sin(mAngle * I)* mData[I][1]/100；ctx.lineTo(x，y)；} CTX。关闭路径()；ctx.fillStyle=rgba(255，0，0，0.5)；CTX。fill()；CTX。restore()；} //画点函数画圆(CTX){ CTX。save()；var r=MC中心/18；for(var I=0；I m counti){ var x=m center mRadius * math。cos(mAngle * I)* mData[I][1]/100；var y=mCenter mRadius * math。sin(mAngle * I)* mData[I][1]/100；CTX。begin path()；ctx.arc(x，y，r，0，Math .PI * 2)；ctx.fillStyle=rgba(255，0，0，0.8)；CTX。fill()；} CTX。restore()；}/脚本/正文/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。