使用Canvas绘制游戏角色属性图

前言作为一个程序员，沉迷于游戏，wtf？？？都是因为前几天腾讯发布了一款叫寻仙的手游。作为曾经的老牌玩家，V先生犹豫了一下，还是忍不住掉进了坑里。为什么入坑了就不玩游戏了，还在这里发文章呢？不不不，V先生今天不是来和大家讨论游戏的。作为一个努力学习，每天都在进步的年轻人，游戏只是业余爱好者，coding才是王道！！！那么V君今天就来给大家分享一下如何使用Canvas绘制游戏登录界面的人物属性图吧！先来一波图怎么样？角色帅气中国化？？？V君当年用了四年的时间来扮演这个角色。..1.什么是画布？canvas元素用于在网页上绘制图形。HTML5的canvas元素使用JavaScript在网页上绘制二维图像。在矩形区域的画布上，控制每个像素点，使用JavaScript绘制二维图形，逐像素渲染。有几种方法可以使用canvas元素绘制路径、矩形、圆形、字符和添加图像。注意！！！canvas标签本身没有绘图功能，只能使用JavaScript在网页上绘制图片。2.任务分析为了简洁明了，V先生没有在页面上花太多时间。希望大家不要介意，毕竟今天的主角是JS。首先，我们简单分析一下。角色的属性图由六个内嵌的正六边形组成，然后从正六边形的中心开始连接六条线，最后根据角色的属性进行颜色填充。这个怎么样？是不是很简单，只需三步就可以画出这个游戏角色的属性图。你可能觉得V先生说起来容易，但是具体怎么操作呢？别担心，先生们，我会把密码发给你。3.代码部分varmW=400,mH=400,mCtx=null,mCount=6,mCenter=mW/2,mRadius=mCenter-50,mAngle=Math.PI*2/mCount,mColorPolygon='#000000',mData=[['爆发',100],['防御',60],['治疗',50],['控制',60],['辅助',30],['机动',70]],mColorText='#000000',canvas=document.createElement('canvas');document.body.appendChild（画布）；canvas.width=mW;canvas.height=mH;mCtx=canvas.getContext('2d');首先，我们需要指定一个id属性（在脚本中经常引用），然后使用width和height属性来定义画布的大小。这里我把画布的宽高设置为400，六边形的个数当然是6个，图形的中心等于自己宽度的一半，线条的颜色是黑色，画图即可使用数组写入自定义数据后启动。细心的朋友可能会问为什么mRadius等于mCenter减50？这里请V君多多关照，大家看了就知道结果了~~~画六个内嵌六边形functiondrawPolygon(ctx){ctx.save();//保存默认状态ctx.strokeStyle=mColorPolygon;varr=mRadius/mCount;for(vari=0;i=0&&mAngle*i<=Math.PI/2){ctx.fillText(mData[i][0],x,y+fontSize);}elseif(mAngle*i>Math.PI/2&&mAngle*i<=Math.PI){ctx.fillText(mData[i][0],x-ctx.measureText(mData[i][0]).width,y+fontSize);}elseif(mAngle*i>Math.PI&&mangle*i<=Math.PI*3/2){ctx.fillText(mData[i][0],x-ctx.measureText(mData[i][0]).宽度,y);}else{ctx.fillText(mData[i][0],x,y);}}ctx.restore();}至此，我们的角色属性图绘制完成。不知道小伙伴们看完之后想明白V君埋下的问题了吗？50px，是的，mRadius等于mCenter减去50。50px是为我们的文字预留的位置。代码中的if语句是通过不同的位置来调整文字的显示位置。4.小结综上所述，简单说明如何使用Canvas绘制角色属性图。以上内容是个人理解和网上学习的总结。如有错误，请指正，互相鼓励。关于Canvas元素，它的应用领域非常广泛。比如在游戏方面，canvas在基于网页的图像展示方面比Flash更立体、更精细，canvas游戏在流畅度和跨平台方面更胜一筹。在数据可视化方面，百度的echart、d3.js、three.js等都使用了canvas。如果你认为Canvas的唯一应用就是这个，那你就错了。在现在和未来的智能手机时代，HTML5技术可以在banner广告中发挥巨大的作用，使用Canvas实现动态广告效果再合适不过了。?更多Canvas内容，点这里~?源码地址：Github??拜托我的小星星~